CSS：100％高度内容区域，具有可变高度标题 [英] CSS: 100% height content area with variable-height header

问题描述

我有一个页面包含可变高度标题，内容区域和页脚。我想要内容区域总是填充视口，并垂直增长以适应内容的需要。我发现了很多使用固定高度头文件的例子，但是没有高度未知的地方。

I have a page with a variable-height header, content area, and footer. I want the content area to always fill the viewport, and grow vertically to fit content as necessary. I've found lots of examples of doing this with fixed-height headers, but none where the height is unknown.

任何解决方案都需要在IE 6,7和8，Firefox 3.x和Safari 4.这可以用纯CSS吗？是否必须提供并使用基于表的布局？

Any solution needs to work in IE 6, 7 and 8, Firefox 3.x and Safari 4. Can this be done with pure CSS? Do I have to give in and resort to table-based layout?

编辑：
另一个要求是我可以将元素放在内容区域中，并获得它们可以扩展到内容区域的完整高度（无论是视口高度 - 页眉高度 - 页脚高度还是更大）。我们要显示的一些内容有自己的header和footer部分，所以我真正寻找的是一个可嵌套的解决方案。

An additional requirement is that I can place elements inside the content area and get them to expand to the full height of the content area (be it viewport height - header height - footer height or larger than that). Some of the content we want to display has "header" and "footer" sections of their own, so what I'm really looking for is a nestable solution.

推荐答案

好，所以最小高度的CSS属性不工作）。

Ok so the min-height CSS property doesn't work :)

我现在玩一个实际的HTML文件，我找到了一种方法。

I played around with an actual HTML file now and I believe I found a way.

.header-footer
{
    height: 10%;
    background-color: lightYellow;
    display: table;
    width: 100%;
}

.container
{
    margin-left: auto;
    margin-right: auto;
    height: 80%;
    width: 100%;
    display: table;
}

.inner
{   
    background-color: lightPink;
    height: 100%;
}

我们使用 display：table 属性，以确保每个< div> 能够很好地坐在其他位置。

We use the display: table property to make sure each <div> sits nicely under and over the other ones.

em>注意：您必须为页面上的每个元素设置height属性。它不必大到我选择的10％，但至少是一些东西。一旦内容插入大于高度值的元素，它就会展开。

NOTE: You have to set a height property for each of the elements on the page. It doesn't have to be as large as 10% that I chose, but at least something. Once the content is inserted into the element that is larger than the height value it should expand.

我创建了两个独立的HTML页面，看看这是否适合您：

I've created two seperate HTML pages for you to examine to see if this suits you:

• 内容不大于视口


• 大于视口的内容

• Content not larger than the viewport
• Content larger than viewport

希望这是您要查找的内容。

Hopefully this is what you're looking for.

感谢

这篇关于CSS：100％高度内容区域，具有可变高度标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！