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

【问题标题】：How do I set div height proportional to screen resolution?如何设置与屏幕分辨率成比例的 div 高度？
【发布时间】：2014-06-06 23:13:14
【问题描述】：

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

我的页面结构如下：

    <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%（窗口高度）减去标题高度（50 像素）。此外，我希望每个 id 为“image_container”的 div 是“main”div 的 30% 和 widonws 宽度的 100%。所以在需要滚动之前，我在页面中有大约 3 个这样的 div。

问题是 % 似乎根本不起作用。因为不是我写的（用 Chrome 的开发工具试过）。

实际上我正在使用引导程序来填充标题/主目录的内容，但据我所知，这不应该给高度带来问题。

有什么线索吗？提前致谢

【问题讨论】：

检查calc():developer.mozilla.org/en-US/docs/Web/CSS/calc

标签： css height

【解决方案1】：

您的关键问题是您没有更改#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 - 只是想一想，“高度：计算（100%-50px）；”是一个无效的属性，至少在 chrome 中是这样，但是'height: calc(100% - 50px);' 是一个有效的属性，同样，至少在 chrome 中。

【讨论】：

【解决方案2】：

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

http://jsfiddle.net/jVkL6/

【讨论】：

感谢您的建议。但是，我只是通过为每个“images_container”设置背景颜色来编辑您的 jsfiddle，但它没有按预期工作。 jsfiddle.net/jVkL6/4
您将 css 类命名为 img_container，但在 css 中您使用 image_container。另外你需要所有父母都有身高（.main）需要：jsfiddle.net/jVkL6/5