Question

我有一个可变高度的标题。我希望它下面的内容div扩展窗口的整个高度。但是，如果我将内容div设置为高度100％，则内容div将脱离屏幕（因为标题高度）并引入滚动条。

我知道这可以针对固定标头进行，请参阅（http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-它更容易/）但我认为他的方法（顶部和底部设置的绝对定位）不适用于可变高度标题。

有一个使用表格显示的解决方案（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>

Answer 1

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

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

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

Answer 2

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

那样，

即使内容没有延伸到页面底部，看起来也是如此。
当内容超出垂直限制时，身体会随之伸展。

希望这有帮助。

Answer 3

每当我遇到这样的问题时，我会尝试对页面进行重新分解，以便<body>最终成为全高度元素并进行所有滚动。

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

Answer 4

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

e.g。

<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>

我可以创建一个扩展到页面底部的内容div，具有可变高度标题，没有滚动条

4 个答案: