gpt4 book ai didi

html - DIV 在 DIV 内,高度为 100% 减去边距

转载 作者:行者123 更新时间:2023-11-28 06:13:47 27 4
gpt4 key购买 nike

我想在一行中显示两个 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%;
}

最佳答案

您可以在外框的底部添加填充物。您还必须设置 box-sizing: border-box;这样这个额外的填充就不会增加外框的高度。

所以你的盒子类变成了:

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

updated fiddle here

编辑添加:

如果你实际上不需要在内盒上使用边距,你可以完全删除它们,只需在外盒上设置一个 10px 的内边距,并在 box-sizing:border-box

another fiddle

关于html - DIV 在 DIV 内,高度为 100% 减去边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35999789/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com