我是否可以创建一个内容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>Stack Overflow用户
发布于 2012-11-12 14:52:41
您是否考虑过重构您的html，使标题位于"content“div中？这样，标题仍然是可变高度，内容div仍然会填充页面。如果您需要对内容div的边框进行样式设置，那么就会出现唯一的问题。您的预期布局是否会阻止这成为一个很好的解决方案？
例如：
<body>
<div id="content">
<div id="header">
<h1>A Heading</h1>
</div>
<p>A paragraph.</p>
</div>
</body>...and如果您要走那么远，您可以始终删除内容div，并将所有内容放置在身体内，这是100%的高度：
<body>
<div id="header">
<h1>A Heading</h1>
</div>
<p>A paragraph.</p>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13345325
复制相关文章
相似问题
腾讯云开发者
