Question

我有一个div，我需要底部的div来填充屏幕的其余部分并显示滚动条。底部div没有显示滚动条。

.page {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: $menu-height 0 0 0;
  box-sizing: border-box;
}

.sidebar {
  width: 500px;
  float: left;
  height: 100%;
  box-sizing: border-box;
  background: #ddd;
  border-right: 1px solid red;
}

.top {
  height: 200px;
  background: #eee;
}

.bottom {
  background: #ccc;
  overflow-y: auto;
}

.filler-content {
  height: 2000px;
}

<div class="page">
  <div class="sidebar">
    <div class="top">
      top
    </div>
    <div class="bottom">
      <div class="filler-content">
        bottom
      </div>
    </div>
  </div>
</div>

Answer 1

如果我正确理解了您的问题，display: flex是您的朋友。将display: flex; flex-direction: column;添加到.sidebar并将flex: 1;添加到.bottom，应该这样做。如果我误会了，请在评论中让我知道，否则我会尽力帮助

演示：http://jsfiddle.net/qy5fL29t/23/

Answer 2

我将使用flexbox解决方案，因为它将使它变得更加简单，并且摆脱了使用float的需要（我们不应该在css3那天滥用它们）

html,
body {
  height: 100%;
  margin: 0;
}

.page {
  height: 100%;
  display: flex;            /* this one is so that you don't need to float the sidebar and can insert a main area that will take up the rest of the width */
  flex-direction: column;
  flex-wrap: wrap;           
}

.sidebar {
  width: 500px;
  height: 100%;
  display: flex;            /* this is so we can get bottom to take any height top doesn't need */
  flex-direction: column;
  background: #ddd;
  border-right: 1px solid red;
}

.top {
  flex-basis:200px;
  min-height: 200px;           /* these two are to force top to be 200px otherwise flex may recalculate based on available space */
  max-height: 200px;
  background: #eee;
}

.bottom {
  flex-grow: 1;             /* this forces bottom to grow to fill the space top doesn't take */
  overflow-y: auto;
}


/* test and example below */
.filler-content {
   height:1000px;
}

.main {
  flex-grow: 1;
  background: white;
}

<div class="page">
  <div class="sidebar">
    <div class="top">
      top
    </div>
    <div class="bottom">
      <div class="filler-content">
        bottom
      </div>
    </div>
  </div>
  <div class="main">
  </div>
</div>

Answer 3

用此替换css

.sidebar {
  width: 500px;
  float: left;
  height: 100%;
  box-sizing: border-box;
  background: #ddd;
  border-right: 1px solid red;
}

.top {
  height: 200px;
  background: #eee;
}
.bottom {
  background: #ccc;
  overflow-y: scroll;
  height:200px
}

.filler-content {
height:2000px;
}

<html>
<body>
  <div class="page">
    <div class="sidebar">
      <div class="top">
      top
      </div>
      <div class="bottom">
        <div class="filler-content">
          bottom
        </div>
      </div>
    </div>
  </body>
</div>
</html>

Answer 4

您可以将此代码用于div底部滚动条。

.bottom {
  background: #ccc;
  overflow-y: auto;
  height:200px;

}

如何获取一个div来填充屏幕剩余高度

4 个答案: