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％的高度减去边距

回答

相关问题