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

您可以使用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);
})

Answer 2

我看到的最简单的方法是显示表格，但这取决于您必须支持的浏览器（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%;
}

3个堆叠的div，最小高度

2 个答案: