我是否可以创建一个内容div，扩展到页面底部，具有可变高度的标题，没有滚动条？
我是否可以创建一个内容div，扩展到页面底部，具有可变高度的标题，没有滚动条？
提问于 2012-11-12 14:17:40
我有一个可变高度的标题。我希望它下面的内容div扩展窗口的全部高度。但是，如果我将内容div设置为高度100%，内容div就会关闭屏幕(因为标题高度)并引入一个滚动条。
我知道这可以用于固定的标头，见(http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/)，但是我认为他的方法(顶部和底部的绝对定位)不会适用于可变高度的标头。
有一个使用表显示(http://stackoverflow.com/questions/8555820/)的解决方案，但我想支持IE7。
因此，总结一下：
- 标头是可变高度。
- 我希望内容div扩展到窗口的底部。
- 我不想要滚动条，除非它是必需的
- 如果没有任何纯css解决方案，我已经知道如何在JQuery中这样做了。
下面是显示问题的示例代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body { height: 100%; }
#header { background-color: yellow; }
#content {
background-color: gray;
height: 100%;
}
</style>
</head>
<body>
<div id="header">
<h1>A Heading</h1>
</div>
<div id="content">
<p>A paragraph.</p>
</div>
</body>
</html>回答 4
Stack Overflow用户
发布于 2012-11-12 14:38:35
可以使用“溢出”属性删除滚动条。但你的内容必须适合一个页面。
html, body { height: 100%; overflow: hidden;}否则，我认为您将需要JavaScript来做到这一点。
Stack Overflow用户
发布于 2012-11-12 14:45:54
这可能过于简化，但您可以通过将body的背景色设置为相同的颜色(即：gray )来伪造内容区域的高度。
那样的话
- 即使内容没有延伸到页面的底部，看起来也是如此。
- 当内容超出垂直极限时，身体就会随之伸展。
Stack Overflow用户
发布于 2012-11-12 14:42:41
每当我遇到这样的问题时，我都会尝试重新考虑页面，这样<body>就会成为所有滚动的完全高度元素。
您可以使用position:fixed将标题保持在顶部，然后允许主体与内容一起滚动。您也可以对侧栏或其他元素执行同样的操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13345325
复制相关文章
相似问题
腾讯云开发者
