Question

使用基本的三行布局：

<div class="EditorHeaderWrapper">
   <h1>Title</h1>
</div>

<div class="EditorMainRowWrapper">
 // Main row guts go here
</div>

<div class="EditorFooterWrapper">
</div>

我怎样才能这样做，当浏览器高度降低时，中间行会在页脚（或页眉）被压碎之前完全粉碎？

.EditorHeaderWrapper{
   position:absolute;
   top:0;
   left:0;
   right:0;   
   height:49px;
   background-image:url('blah');
   border-bottom:1px solid black;   
}

.EditorMainRowWrapper{
   position:absolute;
   top:49px;
   left:0;
   right:0;
   bottom:30px;
   background:#f9f9f4;
   overflow:hidden;
}


.EditorFooterWrapper{
   position:absolute;
   bottom:0;
   left:0;
   right:0;   
   height:30px!important;
   background:#3c3b37;
   border-bottom:1px solid black;   
}

以下是使用上述代码的工作小提琴： http://jsfiddle.net/ZaFp8/3/

但问题在于：当您将代码放在body元素（不是小提琴）中的真实浏览器（FF26）中时，如果没有其他样式，它就不起作用了！页脚首先被切断！所以jsfiddle正在添加修复问题的东西。

所以我假设我需要在body，html或可能包含格式的包装div中添加一些定义。但是什么，以及为什么？

Answer 1

因为您的页脚div是绝对定位的，您需要为body和html元素指定100％的最小高度，以将它们“拉伸”到窗口的整个高度。您也不需要绝对定位其他两个div - 它们将使用相对定位自动从上到下对齐。

在此处对您的代码进行了一些其他调整：http://jsfiddle.net/hoppergrass/ZaFp8/10/

HTML：

<div>
<div class="EditorHeaderWrapper">
   <h1>Title</h1>
</div>

<div class="EditorMainRowWrapper">
 // Main row guts go here
</div>

<div class="EditorFooterWrapper">
</div>
</div>

CSS：

 html {
    height: 100%;
}

.EditorHeaderWrapper{
   position:relative;  
   height:49px;
   background:#3c3b37;
   border-bottom:1px solid black;   
}

.EditorMainRowWrapper{
   position: relative;
   overflow:hidden;
}

h1 {
   margin: 0;
    padding: 0;
}
.EditorFooterWrapper{
   position:absolute;
   bottom:0;
   left:0;
   right:0;   
   height:30px!important;
   background:#3c3b37;
   border-bottom:1px solid black;   
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
   background:#f9f9f4;
}

编辑：拼写错误

在缩小浏览器调整大小的其他行之前完全收缩中间行

1 个答案: