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

问题描述：

我有一个可变高度标题，内容区域和页脚的页面。我希望内容区域始终填充视口，并根据需要垂直增长以适应内容。我发现很多使用固定高度标题的例子，但没有一个高度未知的地方。CSS：可变高度标题的100％高度内容区域

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

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

Dupe？ http://*.com/questions/1211331/how-can-i-convert-this-table-based-layout-to-css – cletus 2009-08-04 00:32:58

停止支持IE6 – Jason 2009-08-04 00:43:01

这将是棘手的，没有javascript完成。是否有理由让内容区域占据整个视区减去标题，即使没有内容可以展开它？你究竟想要完成什么？ – kmiyashiro 2009-08-04 02:54:17

答

确定这样的最小高度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页面，为您检查，看看是否适合你：

Content not larger than the viewport
Content larger than viewport

希望这是你在找什么。

感谢

答

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

答

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

例如

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

.content 
{ 
    min-height: 80%; 
}

请确保您同时设置<html>和<body>标签有一个min-height: 100%这样你可以填满整个视口。

这应该允许页面根据需要展开，但至少保持100％。

感谢

答

我花了一天使用此选项试验和打这么多奇怪的死角，我的专业意见，现在是这样的：

你设计的，它错了。

完全跳过可变高度标题。无论如何，这是一个愚蠢的想法。我做到了。为我工作很好。现在，我是一个简单的DOM蜘蛛网的自豪拥有者，没有任何障碍导致我进入了计算器。

答

请参阅此琴：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; }

答

请尝试一下本作的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％高度内容区域

相关推荐