的CSS顯示錶不尊重百分比

表示我有一個簡單的檯面尺寸：的CSS顯示錶不尊重百分比

<body> 
    <div class="wrapper"> 
    <div class="board"> 
    <div class="line"> 
     <div class="position"></div> 
     <div class="position"></div> 
     <div class="position"></div> 
     </div> 
     <div class="line"> 
     <div class="position"></div> 
     <div class="position"></div> 
     <div class="position"></div> 
     </div> 
     <div class="line"> 
     <div class="position"></div> 
     <div class="position"></div> 
     <div class="position"></div> 
     </div> 
    </div> 
    </div> 
    </div> 
</body>

而且隨着這個CSS：

.wrapper { 
    width: 80%; 
    height: 80%; 
    margin: auto; 
} 
.board { 
    background-color: #37392e; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    height: 100%; 
} 

.line { 
    display: table-row; 
} 
.position { 
    background-color: #DDCECD; 
    display: table-cell; 
    width: 33%; 
}

當我指定的大小都與和高度， div不顯示。我不會在div中使用文本，而是在他們的css「background」屬性中顯示圖像。我該如何強制表格元素尊重以％表示的大小。

來源

2016-09-17 cedlemo

這是因爲身高等於零，0的80％仍然爲0.您需要爲包裝設置一個特定的高度，您可以使用HTML5 vh單位將其設置爲80％查看端口。

.wrapper { 
    width: 80%; 
    height: 80vh; 
    margin: auto; 
}

來源

2016-09-17 10:30:55 MakG

我驗證你的視口單位的信息回答。 – cedlemo

集身體，HTML高度爲100％，那麼你就可以在%

你的工作代碼％使用高度的board DIV隨高度：

html, 
 
body { 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
.wrapper { 
 
    width: 80%; 
 
    height: 80%; 
 
    margin: auto; 
 
} 
 
.board { 
 
    background-color: #37392e; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.line { 
 
    display: table-row; 
 
} 
 
.position { 
 
    background-color: #DDCECD; 
 
    display: table-cell; 
 
    width: 33%; 
 
}

<div class="wrapper"> 
 
    <div class="board"> 
 
    <div class="line"> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
    </div> 
 
    <div class="line"> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
    </div> 
 
    <div class="line"> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-09-17 10:29:58

如果你想以百分比（％）使用高度，那麼需要設置父母高度。只需在body和html標籤上添加100％的高度即可。

html, body{ 
 
height: 100%; 
 
} 
 
.wrapper { 
 
    width: 80%; 
 
    height: 80%; 
 
    margin: auto; 
 
} 
 
.board { 
 
    background-color: #37392e; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.line { 
 
    display: table-row; 
 
} 
 
.position { 
 
    background-color: #DDCECD; 
 
    display: table-cell; 
 
    width: 33%; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="board"> 
 
     <div class="line"> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     </div> 
 
     <div class="line"> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     </div> 
 
     <div class="line"> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     <div class="position"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-09-17 10:31:11

的CSS顯示錶不尊重百分比

回答

相關問題