gpt4 book ai didi

html - 如何使内部 div 至少匹配 body 的高度?

转载 作者:行者123 更新时间:2023-11-28 15:23:21 25 4
gpt4 key购买 nike

这是一个示例,如果 div 是使用最小高度的 body 的子元素,我希望它能正常工作:

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
}
.outer-wrap{
min-height: 100%;
}
.table-layout{
display: table;
min-height: 100%;
width: 100%;
}
.table-cell{
display: table-cell;
width: 50%;
padding: 2%;
}
.blue{
background: #55a;
}
.grey{
background: #bbb;
}
</style>
</head>
<body>
<div class="outer-wrap">
<div class="table-layout">
<div class="table-cell blue">
test
</div>
<div class="table-cell grey">
content<br />
<br />
content<br />
<br />
content<br />
<br />
</div>
</div>
</div>
</body>
</html>

https://codepen.io/anon/pen/OjxmGj

但是,当我添加一个带有 min-height:100% 的外部 div 时;内部 div 不再填充主体的高度:

<!DOCTYPE html>
<html>
<head>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
}
.outer-wrap{
min-height: 100%;
}
.table-layout{
display: table;
min-height: 100%;
width: 100%;
}
.table-cell{
display: table-cell;
width: 50%;
padding: 2%;
}
.blue{
background: #55a;
}
.grey{
background: #bbb;
}
</style>
</head>
<body>
<div class="table-layout">
<div class="table-cell blue">
test
</div>
<div class="table-cell grey">
content<br />
<br />
content<br />
<br />
content<br />
<br />
</div>
</div>
</body>
</html>

https://codepen.io/anon/pen/JyrNVj

更新整个布局以使其正常工作对我来说并不实际,所以我希望有另一种方法可以在不删除外部 div 的情况下使它正常工作。

最佳答案

插入“高度:100vh;”到内部 div。

引用这个SO post on Viewport-Percentage了解更多详情。

使用 Inspect,这似乎产生了预期的结果。

关于html - 如何使内部 div 至少匹配 body 的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45674417/

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