2

我想创建三个堆叠div的 s。顶部和底部的高度是固定的，而中间的高度是动态的，可以扩展以填充剩余空间：

在此处输入图像描述

我尝试了很多事情，例如将高度设置为auto. 我确实有一个解决方案，但它涉及 JavaScript（即计算剩余高度），但我想知道是否有纯 CSS 解决方案。

4

4 回答 4

1

一种解决方案是使用 position 来完成absolute。

这种方法的缺点是，如果周围的总高度更小，那么固定高度的总和container将不再可见。

需要注意的另一件事是，如果您想针对移动设备，这可能是一个糟糕的解决方案。该解决方案是否合适，始终取决于具体情况。

如果我没记错的话，您只会遇到不支持该top bottom位置组合的IE 6（在桌面上）的问题absolute。

HTML

 <div class="header"></div>
 <div class="container"></div>
 <div class="footer"></div>

CSS

  .header, .container, .footer{
      position: absolute;
      outline: 1px solid black;
  }

  .header {
      left: 0px;
      top: 0px;
      right : 0px;
      height: 50px;
  }


  .container {
      left: 0px;
      top: 50px;
      right : 0px;
      bottom: 50px;
  }


  .footer {
      left: 0px;
      bottom: 0px;
      right : 0px;
      height: 50px;
  }

JSFiddle

于 2013-09-09T17:53:34.307 回答
1

有一个 CSS 解决方案，但它不适用于旧版浏览器。您需要使用calcCSS 新增的“功能”，并结合height: 100%. 如果您以前从未使用height: 100%过，那么您就知道您想要 100% 高的元素的每个父元素也必须设置为height:100%. calc可以取一个百分比值并从中减去像素，因此您只需将其设置为100%负值，无论顶部和底部 div 有多高。

支持：IE9+、Firefox 4+、Chrome 19+、Safari 6+ http://caniuse.com/calc

HTML

<div id='top'></div>
<div id='mid'></div>
<div id='bot'></div>

CSS

html, body
{
    height: 100%;
}

#top, #bot
{
    height: 50px;
    background: red;
}

#mid
{
    height: calc(100% - 100px);
}

小提琴：http : //jsfiddle.net/jakelauer/9cYUB/

于 2013-09-09T17:55:15.043 回答
1

如果您需要旧版浏览器支持，或者如果您需要支持IE8+ 或更高版本，您可以使用 HTML 表格来完成，您可以使用 CSS 表格布局。

这是一个jsFiddle使用 CSS 表格布局。

HTML

<div>
    <div>
        <div>Fixed Height</div>
    </div>
    <div>
        <div>
            <div>Variable Height</div>
        </div>
    </div>
    <div>
        <div>Fixed Height</div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-size: 20pt;
    font-family: Verdana;
}
body > div {
    display:table;
    width: 100%;
    height:100%;
}
body > div > div {
    display: table-row;
}
body > div > div > div {
    display: table-cell;
    vertical-align: middle;
}
body > div > div:nth-child(odd) {
    background: grey;
    color: #FFF;
    height: 100px;
}
body > div > div:nth-child(even) {
    height:100%;
    width:100%;
}
body > div > div:nth-child(even) >div {
    height:100%;
    width:100%;
    overflow:hidden;
}
于 2013-09-09T18:02:48.870 回答
-1

如果我了解您的要求，您需要使用 wrap div：http ://www.cssstickyfooter.com/using-sticky-footer-code.html

于 2013-09-09T17:51:48.517 回答