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

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;   
}

这是一个使用上面代码的工作 fiddle : http://jsfiddle.net/ZaFp8/3/

但这就是问题所在:当您将代码放在真正的浏览器 (FF26) 中的 body 元素内(而不是在 fiddle 中)，并且没有其他样式存在时，它不起作用!页脚首先被切断!所以 jsfiddle 正在添加一些东西来解决这个问题。

所以我假设我需要向正文、html 或可能具有某种格式的包装器 div 添加一些定义。但是什么，为什么？

Answer 1

因为您的页脚 div 是绝对定位的，所以您需要将 100% 的最小高度分配给 body 和 html 元素，以将它们“拉伸(stretch)”到窗口的整个高度。您实际上也不需要绝对定位其他两个 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;
}

编辑:拼写错误