代码之家 › 专栏 › 技术社区 › Annabelle

CSS:100%高度内容区,带可变高度标题

header layout css

Annabelle · 技术社区 · 15 年前

我有一个具有可变高度的页眉、内容区和页脚的页面。我希望内容区域始终填充视区,并根据需要垂直增长以适合内容。我发现了很多使用固定高度标题进行此操作的示例,但是没有一个示例的高度未知。

任何解决方案都需要在IE 6、7和8、Firefox 3.x和Safari 4中工作。这可以用纯CSS完成吗?我必须放弃并求助于基于表的布局吗?

编辑: 另外一个要求是,我可以将元素放在内容区域内,并让它们扩展到内容区域的整个高度(无论是视区高度-页眉高度-页脚高度还是大于此高度)。我们要显示的一些内容都有自己的“页眉”和“页脚”部分,所以我真正想要的是一个可嵌套的解决方案。

6 回复 | 直到 11 年前

mlevit 15 年前

好的,所以最小高度的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页面供您检查是否适合您:

希望这就是你要找的。

谢谢

Gordon Gustafson 15 年前

如果希望标题更改大小,请使用相对高度。内容将垂直填充视区。

mlevit 15 年前

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

例如

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

.content
{
    min-height: 80%;
}

确保两个都设置好 <html> 和 <body> 标签有一个 min-height: 100% 这样就可以填充整个视区。

这应该允许页面根据需要扩展,但至少保持100%。

谢谢

jchook 12 年前

我花了一天的时间来试验这个选项,结果遇到了许多奇怪的死胡同,我的专业建议是:

你设计错了。

完全跳过可变高度标题。不管怎样,这是个愚蠢的想法。我做到了。对我来说很好。现在,我自豪地拥有了一个非常简单的dom cobweb,并且没有导致stackoverflow的障碍。

Marco Marsala 11 年前

请看这把小提琴: 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 11 年前

请尝试此项用于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%; }