中间 div 取顶部 div 和绝对定位的底部 div 之间的剩余高度 [重复]

Posted

技术标签:

【中文标题】中间 div 取顶部 div 和绝对定位的底部 div 之间的剩余高度 [重复]【英文标题】：Middle div take the remaining height between a top div and a absolute positioned bottom div [duplicate] 【发布时间】：2017-05-14 03:31:01 【问题描述】：

我有这种结构，我将三个 div（顶部、中间、底部）包装在一个 div（包装器）中：

#wrapper 
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  position: relative;


#top 
  height: 50px;
  background: green;


#middle 
  background: orange;
  overflow: auto;


#bottom 
  background: blue;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 10px 0;

<html>

<body>
  <div id="wrapper">
    <div id="top">
      Top
    </div>
    <div id="middle">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>
    </div>
    <div id="bottom">
      Bottom
    </div>
  </div>
</body>

</html>

如您所见，wrapper div 具有固定的高度，bottom div 相对于 wrapper div 是绝对定位的。 middle div 有一个内容列表，它不在 wrapper div 之外。我想要实现的是让中间 div 只占用顶部 div 和底部 div 之间的剩余高度，并且仍然能够滚动。我怎样才能做到这一点？

【问题讨论】：

【参考方案1】：

最简单的方法是使用 flex :（实际上好像是重复的）

#wrapper 
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  display: flex;
  flex-flow: column;

#top 
  height: 50px;
  background: green;

#middle 
  flex: 1;
  background: orange;
  overflow: auto;

#bottom 
  background: blue;
  padding: 10px 0;

<html>

<body>
  <div id="wrapper">
    <div id="top">
      Top
    </div>
    <div id="middle">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>
    </div>
    <div id="bottom">
      Bottom
    </div>

  </div>
</body>

</html>

display:table 属性和绝对定位可以帮助旧浏览器：

#wrapper 
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  display: table;
  table-layout: fixed;

#top,
#bottom 
  color: white;
  display: table-cell;
  vertical-align: middle

#middle 
  display: table-row;

#top 
  height: 50px;
  background: green;

#middle 
  background: orange;
  position: relative;
  height: 100%;

#middle .buffer 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;

#bottom 
  height: 1%;
  background: blue;
  padding: 10px 0;

<div id="wrapper">
  <div id="top">
    Top
  </div>
  <div id="middle">
    <div class="buffer">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>
    </div>
  </div>
  <div id="bottom">
    Bottom
  </div>
</div>

【讨论】：

【参考方案2】：

你可以用你的 css 做这样的事情：

#wrapper 
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  position: relative;


#top 
  height: 25%;
  background: green;


#middle 
  background: orange;
  overflow:scroll;
  height:50%;



#bottom 
  background: blue;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 10px 0;
  height:15%

这里是jsfiddle。如果您的内容太大而无法容纳，这将让您滚动。我添加了一些额外的高度参数，但您可以更改它们以满足您的特定需求。重要的是把你的溢出设置为scroll，这样如果有额外的内容，DOM 会滚动，这样你就可以看到所有的内容。

【讨论】：

是的，我已更改删除overflow:scroll 并添加了这些属性overflow-y:scroll; overflow-x: hidden;。但在#middle 和#bottom div 之间仍有一条白线。这感觉很奇怪。无论如何要删除它吗？ jsfiddle 是的，只需更新中间的大小即可。我刚刚又加了 5%：jsfiddle.net/5L8x2cea/1【参考方案3】：

只需将overflow:hidden 提供给包装器即可。隐藏从容器/包装器 div 溢出的任何内容。

或溢出：滚动；如果您想访问隐藏的内容（但这会在某些区域添加令人讨厌的滚动条）。

#wrapper 
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  position: relative;
  overflow:hidden;



#top 
  height: 50px;
  background: green;


#middle 
  background: orange;
  overflow: auto;


#bottom 
  background: blue;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 10px 0;

<html>

<body>
  <div id="wrapper">
    <div id="top">
      Top
    </div>
    <div id="middle">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>
    </div>
    <div id="bottom">
      Bottom
    </div>
  </div>
</body>

</html>

【讨论】：

是的。但我需要它是可滚动的。

以上是关于中间 div 取顶部 div 和绝对定位的底部 div 之间的剩余高度 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

如何用css将底部的内容定位到顶部

浮动底部 - 彼此顶部

带像素偏移的css绝对垂直中心

如何让DIV随着左右滚动条移动，上下滚动条不变

绝对定位 div 的边距底部在 Chrome 中工作，但在 Safari 或 Firefox 中不可用

当宽度未知时，将图像水平居中并将其垂直放置在 div 内的底部