我看到有很多类似的问题，但是找不到适合我的解决方案。
我的页面具有以下结构：
<body>
<div id="whole_page">
<div id="header"></div>
<div id="main">
<div id="img_container"></div>
<div id="img_container"></div>
<div id="img_container"></div>
</div>
</div>
</body>
我的CSS是：
html,body{
height:100%; width:100%;
padding-top:50px;
}
#whole_page{
height:calc(100%-50px); width:100%;
}
#header{
position:fixed;
height:50px; // header
}
#image_container{
width:100%;
height:30%;
}
我想将“ main”的高度设置为100％（窗口高度）减去标题高度（50px）。此外，我希望每个id为“ image_container”的div都是“主” div的30％，而widonws宽度要大100％。因此，在需要滚动之前，页面中大约有3个div。
问题在于％似乎根本不起作用。因为我没有写过它们（曾尝试过Chrome的开发工具）。
实际上，我正在使用引导程序来填充标头/主体的内容，但据我所知，这不会给高度带来问题。
有什么线索吗？提前致谢
您的关键问题是您没有更改#main的高度。您的CSS和HTML之间也有一种错觉类型，在CSS中，您引用#image_container，而在HTML中，您使用了'id =“ img_container” 我将CSS和HTML分别更改为“ .img_container”和“ class =“ img_container””。我还注意到，由于“ padding-top：50px;”，您顶部的空间量是#header所需空间的两倍。应用于html和body。
这是代码：
<div id="whole_page">
<div id="header" style="background-color: yellow;"></div>
<div id="main">
<div class="img_container" style="background-color: red;"></div>
<div class="img_container" style="background-color: blue;"></div>
<div class="img_container" style="background-color: green;"></div>
</div>
</div>
和
html, body {
height:100%;
width:100%;
}
body {
margin: 0;
padding-top:50px;
}
#whole_page {
height: calc(100% - 50px);
width: 100%;
}
#header {
position: fixed;
height: 50px;
width: 100%;
top: 0;
}
#main {
height: 100%;
}
.img_container {
width: 100%;
height: 30%;
}
PS-为某些标签添加颜色，以便我看到它们。您只需从'#header'和'.img_container'标记中删除样式属性即可。
编辑-这是一个jsfiddle：http : //jsfiddle.net/xiondark2008/DJJ2d/
EDIT2-只是想，“身高：calc（100％-50px）;” 是无效的属性，至少在Chrome中为无效属性，但是是“高度：calc（100％-50px）;” 同样是有效属性，至少在chrome中是。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句