DIV內部的DIV具有100％的高度減去邊距

我想在一行中顯示兩個DIV。每個DIV都應該有另一個DIV。內部DIV應該具有與外部DIV減去邊距相同的高度。DIV內部的DIV具有100％的高度減去邊距

我無法在DIV內設置適當的高度（忽略下邊距）。你能幫助我嗎？的jsfiddle：https://jsfiddle.net/gf53e0on/

<body> 
    <div class="box"><div class="box-in"></div></div> 
    <div class="box"><div class="box-in"></div></div> 
</body> 

body { 
    position: fixed; 
    width: 100%; 
    border: none; 
    display: table; 
    table-layout: fixed; 
    padding: 0; 
    margin: 0; 
    top: 0; 
    left: 0; 
} 

.box { 
    border: none; 
    display: table-cell; 
    height: 100vh; 
    background-color: yellow; 
} 

.box-in { 
    border: solid 1px; 
    margin-top:10px; 
    margin-bottom:10px; 
    margin-left:10px; 
    margin-right:10px; 
    height: 100%; 
}

來源

2016-03-14 blaballong

您可以添加填充到您的外箱底部。您還必須設置框大小：邊框;所以這個額外的填充不會增加到外框的高度。

所以，你的框類變爲：

.box { 
    border: none; 
    display: table-cell; 
    height: 100vh; 
    background-color: yellow; 
    box-sizing:border-box; 
    padding-bottom:20px; 
}

updated fiddle here

編輯補充：

如果你實際上並不需要在內部框中使用空間，你可以將它們徹底刪除並在其上設置box-sizing:border-box的外框上填充10px。

another fiddle

來源

2016-03-14 23:21:53

當我嘗試顯示DIV裏面的東西與箱類它不工作。 – blaballong

你能不能模糊一點？ –

另一種選擇是使用CSS3的calc來計算高度減去邊距。

body { 
 
    position: fixed; 
 
    width: 100%; 
 
    border: none; 
 
    display: table; 
 
    table-layout: fixed; 
 
    padding: 0; 
 
    margin: 0; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.box { 
 
    border: none; 
 
    display: table-cell; 
 
    height: 100vh; 
 
    background-color: yellow; 
 
} 
 

 
.box-in { 
 
    border: solid 1px; 
 
    margin:10px; 
 
    height: calc(100% - 20px); 
 
}

<div class="box"><div class="box-in"></div></div> 
 
    <div class="box"><div class="box-in"></div></div>

來源

2016-03-14 23:31:14 Aaron

當我嘗試在盒子類中顯示DIV內部的東西時它不起作用。 – blaballong

將內容添加到'

'@blaballong會發生什麼 – Aaron

DIV內部的DIV具有100％的高度減去邊距

回答

相關問題