1

我有一个可变高度的标题。我希望它下面的内容 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

4 回答 4

1

您可以使用溢出属性来删除滚动条。但是您的内容必须适合一页。

html, body { height: 100%; overflow: hidden;}

否则我认为你需要 JavaScript 来做到这一点。

于 2012-11-12T14:38:35.050 回答
1

这可能过于简化，但您可以通过将 的背景颜色设置为body相同颜色来伪造内容区域的高度，即：gray.

那样，

  • 尽管内容没有延伸到页面底部，但看起来确实如此。
  • 当内容确实超出垂直限制时，主体将随之拉伸。
于 2012-11-12T14:45:54.497 回答
0

您是否考虑过重构您的 html 以使标题位于“内容”div 中？这样，标题仍然是可变高度，内容 div 仍然会填满页面。如果您需要为内容 div 的边框设置样式，唯一的问题就会出现。您的预期布局是否会阻止这成为一个好的解决方案？

例如

<body>
    <div id="content">
        <div id="header">
            <h1>A Heading</h1>
        </div>

        <p>A paragraph.</p>
    </div>
</body>

...如果你走那么远，你总是可以完全删除内容 div 并将所有内容放在身体内，无论如何都是 100% 的高度：

<body>
    <div id="header">
        <h1>A Heading</h1>
    </div>

    <p>A paragraph.</p>
</body>
于 2012-11-12T14:52:41.800 回答
0

每当我遇到这样的问题时，我都会尝试重构页面，以便<body>最终成为具有所有滚动功能的全高元素。

您可以position:fixed将标题保持在顶部，然后允许正文随内容滚动。您可以对侧边栏或其他元素执行相同的操作。

于 2012-11-12T14:42:41.370 回答