1

我想知道是否有一种纯 html+css 方式来指定一个 3 行布局，其中中间 div 是贪婪的，并占据了两个固定行留下的所有剩余高度。在 XAML 中，这将是星号 (*) 字符。前任。 <row height="*"></row> 它告诉渲染引擎该行将消耗其父级提供的所有剩余高度。

我希望总高度占据所有屏幕高度（没有垂直滚动）。 

<body style="height:100%">
   <header style="height: 64px"> </header>

   <div style="height: *"> </div>

   <footer style="height: 64px"> </footer>
</body>

当浏览器屏幕调整大小时，中间内容应该会波动，但页眉和页脚应该保持相同的高度固定。

4

4 回答 4

6

这可以通过 CSS 中的绝对定位轻松实现。

* {
  margin:0;
}
header {
  position:absolute;
  width:100%;
  height:64px;
  top:0;
}
footer {
  position:absolute;
  width:100%;
  height:64px;
  bottom:0;
}
div {
  position:absolute;
  width:100%;
  top:64px;
  bottom:64px;
}

请注意，在实际代码中，您需要为内部 div 使用一个类，否则您将设置所有 div 元素的样式。

这是一个更完整的小提琴示例：http: //jsfiddle.net/BMxzn/

于 2013-06-04T12:10:54.037 回答
3

尝试这个

css

html, body{
    height:100%;    
}

header{
    height:64px;
    background-color:#0C9;
}
footer{
    height:64px;
    background-color:#666;
}
.bodyPan{
    height: calc(100% - 128px); 
}

html

<header> </header>

<div class="bodyPan"> </div>

<footer> </footer>

jsFiddle 文件

于 2013-06-04T12:14:00.633 回答
0

您也可以使用它box-sizing:border-box来执行此操作。

div
{
    height: 100%;
    background: pink;
    margin-top: -64px;
    padding-top: 64px;

    margin-bottom: -64px;
    padding-bottom: 64px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

顺便说一句，它比 calc 有更好的浏览器支持。（IE8+ 和所有现代浏览器）

[另请注意，对于 Firefox，您需要在 box-sizing 属性前面加上 -moz- ]

小提琴

于 2013-06-05T10:18:35.313 回答
0

Danield 解决方案是最好的跨浏览器解决方案，但记得添加：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
于 2014-02-11T14:37:13.693 回答