vertical-alignment - 3个最小高度的堆叠div

Question

在思考这个问题时，我一直在挠头。我有 3 个 div。顶部和底部 div 具有最小高度，中间 div 具有未知高度（按内容扩展）但应在页面中居中。然后顶部和底部 div 应填满剩余的顶部和底部空间。

http://oi43.tinypic.com/5lb3v5.jpg

我想要一个纯 HTML/CSS 解决方案。重构 HTML 结构是可能的。

谢谢

当前的 HTML 结构：

<div id="page">
  <div id="top">top div</div
  <div id="middle">middle div</div>
  <div id="bottom">bottom div</div>
</div>

和 CSS：

#page {
  min-height: 100%;
  height: 100%;
  width: 100%;
}
#top, #bottom {
  min-height: 17.5%;
  height: auto !important; /* Set height to content height but keep it minimum 17.5% */
  height: 17.5%; /* Some IE don't understand min-height... */
  width: 100%;
}
#middle {
  height: auto;
  width: 100%;
}

Answer 1

我看到的最简单的方法是表格显示，但这取决于您必须支持的浏览器（http://caniuse.com/#feat=css-table）。

http://jsfiddle.net/NukYE/

body,
html {
  height: 100%;
}
#page {
  display: table;
  min-height: 100%;
  height: 100%;
  width: 100%;
}
#top, #bottom {
  display: table-row;
  min-height: 17.5%;
  height: auto !important; /* Set height to content height but keep it minimum 17.5% */
  height: 17.5%; /* Some IE don't understand min-height... */
  width: 100%;
}
#middle {
  display: table-row;
  height: auto;
  width: 100%;
}

Answer 2

您可以为此使用 Jquery，如下所示：http: //jsfiddle.net/rebeen/8YVzb/

html:

<div id="page">
  <div id="top">top div</div>
  <div id="middle">middle div</div>
  <div id="bottom">bottom div</div>
</div>

CSS：

#page {
 min-height: 300px;
}
#top, #bottom {
  background: #000;
  min-height: 17.5%;
  width: 100%;
}
#middle {
 background:#555;
  height: auto;
  width: 100%;
}

查询：

$(function(){
    var pageHeight = $('#page').height();
    var topHeight = $('#top').height();
    var bottomHeight = $('#bottom').height();
    var middleHeight = $('#middle').height();
    if(middleHeight > (pageHeight-(topHeight+bottomHeight)))
        $('#middle').css(height, 'auto');
    else
        $('#top, #bottom').height((pageHeight-middleHeight)/2);
})