我有简单的布局，我正在尝试将 div 的高度扩展到给定的 %，这样我就可以使用 backgound-size 放置稍后调用的背景 img。
例如，我想让 div1 扩展到 69%。
为什么它不起作用以及如何解决它？
链接:https://jsfiddle.net/mc6ecstr/
CSS:
body
{
color: white;
margin: 0px;
padding: 0px;
height: 1080px;
}
#container
{
width: 100%;
height: 100%;
}
#header
{
background-color: blue;
width: 100%;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-left: 1.5%;
height: 69%; /*doesnt work*/
}
#div2 {
background-color: green;
float: right;
width: 43.17%;
margin-right: 3.6%;
}
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
最佳答案
你需要给 body 和 html 以及他的 parent (#container) height: 100%;
CSS
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%; /* Add this */
}
#container
{
width: 100%;
height: 100%; /* Add this */
}
关于html - CSS 自定义 div 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30035083/