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

jquery：

$(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);
})