2

我遇到的任务看起来很标准：我有一个固定高度的容器，div里面有 3 。我希望第二个div在顶部和底部之间拉伸div。当第二个内容div溢出时-我想显示滚动条。

我知道如何使用absolute定位来完成这项任务。一个问题是：我可以使用tableon divs 吗？

附加要求：如果可能，我想避免将标题的高度设置为固定。

我试图在我的小提琴中对其进行编码，但是，如您所见，我失败了。

CSS：

.container {
    height: 500px;
    background-color: gainsboro;
}

.table {
    display: table;
    height: 100%;
}

.table > div {
    display: table-row;
}

.table > div > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
    overflow: scroll;
}

.center > div {
    height: 100%;
}

.content {
    height: 700px;
}

HTML：

<div class="container">
    <div class="table">
     <div>
         <div>XXX</div>
     </div>
     <div class="center">
         <div>
             <div class="content"></div>
         </div>
     </div>
     <div>
         <div>YYY</div>
     </div>
    </div>
</div>
4

2 回答 2

1

您的方式是正确的，只需进行一些更改（请参阅此Fiddle）：

html, body, .container, .table {
    margin: 0;
    height: 100%;
}

#header,#footer {
    height: 1px;
}

这应该有效，因为如果内容需要，表格单元格的高度会增加。

只是一个提示：你可以改进整个事情，例如我会使用 HTML 5 和<header/>and<footer/>元素。但这不是你问题的一部分。无论如何，这是您小提琴的另一个更新：

 <div>
      <header>
          <div>XXX</div>
      </header>
      <main>
          <div>
              <div class="content"></div>
          </div>
      </main>
      <footer>
          <div>YYY</div>
      </footer>
 </div>

使用 CSS：

html, body, body > div {
    margin: 0;
    height: 100%;
}

body {
    background-color: gainsboro;
}

body > div {
    display: table;
    width: 100%;
}

body > div > * {
    display: table-row;
}

body > div > * > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}

header, footer {
    height: 1px;
}

main如果您想知道的话，它对 HTML 5 来说是非常新的。

于 2013-03-15T15:41:09.127 回答
1

这是一种可能的解决方案：

<div class="container">
    <div class="header">
        <div>Top Header Block</div>
    </div>
    <div class="center">
        <div class="content">
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
        </div><!-- .content -->
    </div><!-- .center -->
    <div class="footer">
        <div>Bottom Footer Block</div>
    </div>
</div>

和CSS：

.container {
    height: 200px;
}
.header, .footer {
    background-color: gainsboro;
}
.center {
    height: inherit;
}
.content {
    background-color: #F0F0F0;
    height: inherit;
    overflow: auto;
}

由于您正在固定容器的高度，因此您继承了 the.center和.content <div>'s 中的高度。

如果调整容器高度，中心 div 会扩展，但页眉和页脚 div 保持相同的高度。

在内容 div 上使用overflow以允许滚动。

小提琴参考：http: //jsfiddle.net/audetwebdesign/nae5z/

于 2013-03-15T15:58:06.670 回答