我想在一行中显示两个DIV。每个DIV都应该有另一个DIV。内部DIV应该与外部DIV相同的高度减去边距。
我无法在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%;
}
答案 0 :(得分:0)
您可以在外框的底部添加填充。你还必须设置box-sizing:border-box;这样额外的填充不会增加外盒的高度。
所以你的盒子类变成了:
.box {
border: none;
display: table-cell;
height: 100vh;
background-color: yellow;
box-sizing:border-box;
padding-bottom:20px;
}
编辑添加:
如果你实际上不需要在内盒上使用边距,你可以完全删除它们,只需在外框上设置一个10px的填充,上面有box-sizing:border-box
。
答案 1 :(得分:0)
另一种选择是使用CSS3&#39; 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);
}
&#13;
<div class="box"><div class="box-in"></div></div>
<div class="box"><div class="box-in"></div></div>
&#13;