使正文高度达到浏览器窗口的100%
我有这样的结构：
<body>
<div id="header">..</div>
<div id="content">..</div>
<div id="footer">..</div>
</body>
和此CSS：
正文{color：white；font-family：“play”,无衬线；max-width：2560px；margin：0 auto；min-width：960px；height：100%；padding：0；}
#header {
position: relative;
overflow: hidden;
margin: 0 auto;
min-width: 960px;
height: 95px;
background-image: url("../images/header-bg.png");
}
#content {
margin: 0 auto;
position: relative;
max-width: 1600px;
height:100%;
overflow:hidden;
}
#footer {
background-color: #009EDB;
background-image: url("../images/footer-bg.png");
bottom: 0;
height: 30px;
margin: 0;
position: relative;
width: 100%;
}
而不是body高度的100%浏览器窗口。我有什么问题？多谢了。
JsFiddle
共有2个答案
为了让它发挥作用。您必须使父和子都具有100%的高度。
html, body {
height:100%; /*both html and body*/
}
body {
margin: 0; /*reset default margin*/
}
-
问题内容： 我有两列的布局-左和右。 右边有一个灰色，我需要根据用户浏览器窗口的高度垂直扩展它。现在结束于该内容的最后一部分。 我试过，;等 问题答案： 有几个CSS 3度量单位，称为： 什么是视口百分比长度？ 根据上面链接的W3候选推荐书： 视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。 这些单位是（视口高度），（视口宽度），（视口最小长度）和（视口最大
-
问题内容： 我只想有一个侧边栏，该边栏将是窗口高度的100％，但除此之外没有任何作用： 我不想拥有，因为我具有水平可滚动的内容，所以固定的部分将保持不变。 有没有办法做这样的事情，也许有或立场？ 问题答案： tl; dr- 添加到您的CSS。 CSS中的百分比值是从某些已经声明了height的祖先继承而来的。在您的情况下，您需要告知边栏的所有父母都必须保持100％的高度。我假设这是的直接子级。 本
-
本文向大家介绍写一个方法来获取div到浏览器窗口的高度相关面试题，主要包含被问及写一个方法来获取div到浏览器窗口的高度时的应答技巧和注意事项，需要的朋友参考一下
-
问题内容： 我想让主体具有浏览器高度的100％。我可以使用CSS吗？ 我尝试设置，但不起作用。 我想为页面设置背景色以填充整个浏览器窗口，但是如果页面内容很少，我将在底部看到一个难看的白色条。 问题答案： 尝试将html元素的高度也设置为100％。 Body向其父级（HTML）寻求如何缩放动态属性，因此HTML元素也需要设置其高度。 但是，身体的内容可能需要动态更改。将最小高度设置为100％将实现
-
问题内容： 我正在尝试使用用于Splinter的Firefox驱动程序来测试一些响应式设计。 自然，这需要我调整浏览器窗口的大小。在文档中，我根本找不到有关浏览器大小调整的任何信息。 我怎样才能做到这一点？ 问题答案： 只是这样做： Splinter API似乎不直接支持此功能- 至少目前还不支持。通用API文档以及每个特定浏览器驱动程序的文档目前都未提及与窗口大小有关的任何内容。但是，一个看似未
-
问题内容： 我们正在针对现有代码库运行Selenium回归测试，并且Web应用程序中的某些屏幕使用弹出窗口作为中间步骤。 当前，我们在测试中使用以下命令： … 大多数情况下都可以使用 。偶尔测试将失败在与线 谁能建议一种更好，更 可靠的 方法？ 另外，我们主要在IE6和7上运行这些测试。 问题答案： 有用！！只是为了让那些喜欢硒的人们更容易。 这对我使用IE7（正常模式）有效。 真是个令人毛骨悚然