Question

我看到有很多类似的问题，但我无法找到适合我的解决方案。

我的页面有这样的结构：

    <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%;
}

我想设置＆＃34; main＆＃34;高度为100％（窗口高度）减去标题高度（50px）。此外，我希望每个div都带有id＆＃34; image_container＆＃34;成为＆＃34;主要＆＃34;的30％ div和大100％的widonws宽度。因此，在需要滚动之前，我在页面中有大约3个div。

问题是％似乎根本不起作用。因为我没有写它们（尝试使用Chrome的开发工具）。

实际上我使用bootstrap来填充header / main的内容，但据我所知，这不应该给出高度问题。

有任何线索吗？提前致谢

Answer 1

您可以使用box-sizing: border-box和padding ..

http://jsfiddle.net/jVkL6/

Answer 2

您的关键问题是您没有更改#main的高度。您在CSS和HTML之间也有一个未命中类型，在您引用的#image_container的CSS中，您使用的HTML＆＃39; id =＆＃34; img_container＆＃34;＆＃39;。我将CSS和HTML都更改为＆＃39; .img_container＆＃39;和＆＃39; class =＆＃34; img_container＆＃34;＆＃39;分别。我还注意到，顶部空间的数量是#header所需尺寸的两倍，因为填充顶部：50px;＆＃39;被应用于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 - 为某些标签添加颜色，以便我可以看到它们。您只需从＆＃39;＃header＆＃39;中删除样式属性即可。和＆＃39; .img_container＆＃39;标签

编辑 - 这是一个jsfiddle：http://jsfiddle.net/xiondark2008/DJJ2d/

EDIT2 - 只是想到，＆＃39;身高：计算（100％-50px）;＆＃39;是一个无效的属性，至少在chrome中，但是＆＃39; height：calc（100％ - 50px）;＆＃39; 一个有效的属性，至少在chrome中。

如何设置与屏幕分辨率成比例的div高度？

2 个答案: