CSS: 变高度头部的100%高度内容区域

Question

CSS: 变高度头部的100%高度内容区域

csslayoutheader

4

我有一个页面，包含可变高度的页眉、内容区域和页脚。我希望内容区域始终填充视口，并根据需要垂直增长以适应内容。我找到了许多使用固定高度页眉来实现此目标的示例，但没有使用未知高度的示例。

任何解决方案都需要在IE 6、7和8、Firefox 3.x和Safari 4中运行。这能够通过纯CSS实现吗？或者我必须采用基于表格的布局？

编辑：另一个要求是，我可以将元素放置在内容区域内，并使它们扩展到内容区域的完整高度（视口高度-页眉高度-页脚高度或大于该高度）。我们想要显示的某些内容具有其自己的“页眉”和“页脚”部分，因此我真正寻找的是一种可嵌套的解决方案。

- Annabelle

重复？http://stackoverflow.com/questions/1211331/how-can-i-convert-this-table-based-layout-to-css - cletus

8

停止支持IE6。 - Jason

这将是没有 JavaScript 很棘手的事情。您想让内容区域在没有内容拉伸它的情况下占据整个视口减去标题的原因是什么？您究竟想要实现什么？ - kmiyashiro

@Jason：不幸的是，我们的一些重要客户拒绝升级IE6，所以我们必须支持它。@kmiyashiro：该应用程序是一个纯ajax网站，而问题所在的内容区域是我们显示动态页面的地方。许多这些页面没有足够的内容来完全填充视口，因此当您导航时，页脚会上下跳动-非常分散注意力。如果页脚保持在底部并且内容区域的样式元素填充可见空间，则看起来更流畅和一致。 - Annabelle

6个回答

0

你可以尝试在页眉、内容和页脚上使用 min-height CSS 属性。

例如：

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

.content
{
    min-height: 80%;
}

请确保将<html>和<body>标签都设置为min-height: 100%，这样您就可以填满整个视口。

这应该允许页面根据需要扩展，但保持最小值为100%。

谢谢。

- mlevit

1

min-height的问题在于它实际上并没有设置元素的高度，因此您无法将高度为100％的内容添加到.content中并使其填充.content。我真正需要的是一个可以嵌套在自身内部的解决方案。我已经根据这个要求编辑了我的问题。 - Annabelle

那么这个解决方案行不通吗？http://peterned.home.xs4all.nl/examples/csslayout1.html - Dan Dascalescu

0

请查看这个 JSFiddle：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; }

- Marco Marsala

0

请尝试以下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%; }

- Marco Marsala

0

我花了一天时间尝试这个选项，遇到了很多奇怪的死胡同，我的专业建议现在是：

你设计错了。

完全跳过可变高度头部。反正它本身就是一个愚蠢的想法。我已经跳过了。对我来说效果很好。现在我拥有一个明显更简单的DOM结构，也没有导致我去StackOverflow查找答案时的障碍。

- jchook

0

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

- Gordon Gustafson

如果内容面板内没有足够的“内容”来拉伸其高度，它将仅填充视口。即使是空元素，我希望其高度至少为视口高度减去标题高度。 - Annabelle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mlevit · Accepted Answer

好的，所以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>在其他元素上下垂直排列。

注意：您必须为页面上的每个元素设置高度属性。它不必像我选择的10％那么大，但至少要有一些。一旦内容插入到大于高度值的元素中，它应该会自动扩展。

我为您创建了两个单独的HTML页面，供您检查是否适合您：

希望这是您要寻找的。

谢谢