Question

我有一个带有可变高度标题，内容区域和页脚的页面。我希望内容区域始终填充视口，并根据需要垂直增长以适合内容。我已经找到很多使用固定高度标题执行此操作的示例，但没有高度未知的情况。

任何解决方案都需要在IE 6,7和8，Firefox 3.x和Safari 4中运行。这可以用纯CSS完成吗？我是否必须放弃并采用基于表格的布局？

编辑：另外一个要求是我可以在内容区域内放置元素并使它们扩展到内容区域的整个高度（无论是视口高度 - 标题高度 - 页脚高度还是大于该高度）。我们想要显示的一些内容有自己的“标题”和“页脚”部分，所以我真正想要的是一个可嵌套的解决方案。

Answer 1

好的，所以min-height CSS属性不起作用：）

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

.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>完全位于其他位置之下。

注意：您必须为页面上的每个元素设置height属性。它不必像我选择的那样大到10％，但至少有些东西。将内容插入到大于高度值的元素后，它应该展开。

我已经创建了两个单独的HTML页面供您检查以确定它是否适合您：

希望这就是你要找的东西。

由于

Answer 2

如果您希望标题更改大小，请使用相对高度。内容已经垂直填充视口。

Answer 3

您可以尝试在标题，内容和页脚上使用min-height CSS属性。

e.g。

.header-footer 
{
    min-height: 20%;
}

.content
{
    min-height: 80%;
}

确保同时设置<html>和<body>代码，以便{？}}填充整个视口。

这应该允许页面根据需要扩展，但保持最低100％。

由于

Answer 4

我花了一天时间尝试这个选项并打了很多奇怪的死胡同，我的专业建议就是这样：

你设计错了。

完全跳过变量高度标题。无论如何，这是一个愚蠢的想法。我做到了。对我来说很棒。现在，我是一个非常简单的DOM蜘蛛网的自豪拥有者，没有任何障碍导致我进行堆栈溢出。

Answer 5

请看这个小提琴：http://jsfiddle.net/qH6K3/

<div id="a">
    <div id="b1">BOX1</div>
    <div id="b2">BOX2</div>
</div>

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html,body{height:100%}

#b1 {
    background-color: red;
    height: 45px;
    width:100%;
}

#b2 {
    background: blue;
    height: 100%;
    width: 100%;
}

#a { height: 100%; padding-bottom: 45px; }

Answer 6

请为CSS尝试此操作：http://jsfiddle.net/K64Mm/6/ 可变高度，内容100％高度（甚至支持iframe 100％高度），没有多余的滚动条，可在触摸设备上滚动。

<div class="wrapper">
    <div class="top topBar">

    </div> 
    <div class="content">
        <iframe scrolling="yes" src="http://www.zeffirino.com"></iframe>
    </div>
</div>

html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }

.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.top { height: 45px; background-color: red; }
.content { height: 100%; width: 100%; overflow: auto !important; }
.content iframe { display: block; border: none; width: 100%; height: 100%; }

CSS：具有可变高度标题的100％高度内容区域

6 个答案: