如何使div填充剩余视口并正确滚动内容？

Question

预期结果

我试图让两个div填充整个视口。 div＃1将下推div＃2以适应其内容。 div＃2将填充剩余的视口大小，如果内容较大，则将其滚动。

示例：

Viewport Height = 1000px;
div#1 content height = 400px;
div#1 height = 400px;
div#2 height = 1000px (viewport height) - 400px (div#1 height) = 600px;
div#2 content height = 2000px;
div#2 scroll (`overflow: auto`) amount = 2000px (div#2 content height) - 600px (#div2 height) = 1400px 

实际结果

div＃2的高度最终成为视口高度，由于它被div＃1向下推，因此内容被切除。

这是一个小提琴：http://jsfiddle.net/vtb9h5fd/2/

html,
body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
}

.container .box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
}

.container .box-1 {
  background-color: green;
  overflow: auto;
}

.container .box-2 {
  background-color: blue;
  overflow: auto;
  height: 100%;
}

<div class="container">
  <div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="box box-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum ligula sed ipsum commodo, a consequat turpis commodo. Phasellus sed leo gravida, sodales orci eget, pellentesque eros. Curabitur pharetra dui in magna efficitur, vel aliquam arcu congue. Cras gravida nunc non erat ullamcorper ultricies. Integer dictum semper diam, nec suscipit odio lobortis in. Pellentesque sed faucibus sapien. Ut vel purus rutrum, malesuada sapien vehicula, finibus quam. Aenean at mollis turpis. Phasellus bibendum nulla ac lobortis consequat. Mauris eget eros sollicitudin, ultricies magna vitae, maximus ligula. Nunc rhoncus mattis sem non dictum. Aliquam erat volutpat. In enim neque, faucibus non faucibus in, vestibulum ac odio.

Pellentesque facilisis aliquam aliquam. Nam consectetur augue eros, non imperdiet neque varius at. Nullam in sapien finibus, convallis mi non, consectetur ex. Aliquam erat volutpat. Cras feugiat, augue ac cursus imperdiet, sapien quam pretium mi, venenatis pretium ante lacus eu ipsum. Ut tincidunt, arcu sed bibendum varius, lacus urna elementum risus, dictum elementum dui felis sit amet est. Quisque sit amet diam molestie, porttitor diam eget, scelerisque eros. Mauris lacinia eu mi ut pulvinar. Nam sodales est pellentesque, pretium lectus quis, mollis libero. Nulla rutrum nibh eget semper lobortis. Duis sit amet justo aliquet, feugiat magna vel, aliquet augue. Nunc ultricies, ex et mollis maximus, risus justo blandit tellus, consectetur hendrerit sapien tellus a quam.

In consectetur felis vel purus sollicitudin, a lacinia lacus finibus. Phasellus eget ex eget felis semper ultrices vel sed lectus. Quisque posuere sagittis eros, nec luctus quam tincidunt dignissim. Mauris sed feugiat sapien, eget aliquet quam. Donec pellentesque arcu et vehicula imperdiet. Donec eget magna pulvinar, laoreet felis a, vulputate tellus. Etiam sit amet ex eleifend, ullamcorper augue dictum, accumsan risus. Etiam volutpat mollis massa sit amet pretium. Pellentesque venenatis, tortor a consequat semper, elit nulla auctor mi, in pretium odio mi vitae ante. Donec lectus lectus, tempor ut volutpat id, elementum quis quam. Fusce non venenatis lorem. Etiam leo nunc, suscipit quis lorem a, rhoncus sollicitudin mauris. In facilisis diam leo, et dignissim justo lacinia id.
  </div>
</div>

我非常确定这是因为height: 100%指的是父级高度100vh（视口高度）。我不确定该怎么做。

Answer 1

更改CSS

html,
body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.container {
 height: 100%;
  display: flex;
  flex-flow: column;
}

.container .box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
}

.container .box-1 {
  background-color: green;
 
}

.container .box-2 {
  background-color: blue;
  overflow: auto;
  flex: 2;
}

<div class="container">
  <div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="box box-2">
    Start Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum ligula sed ipsum commodo, a consequat turpis commodo. Phasellus sed leo gravida, sodales orci eget, pellentesque eros. Curabitur pharetra dui in magna efficitur, vel aliquam arcu congue. Cras gravida nunc non erat ullamcorper ultricies. Integer dictum semper diam, nec suscipit odio lobortis in. Pellentesque sed faucibus sapien. Ut vel purus rutrum, malesuada sapien vehicula, finibus quam. Aenean at mollis turpis. Phasellus bibendum nulla ac lobortis consequat. Mauris eget eros sollicitudin, ultricies magna vitae, maximus ligula. Nunc rhoncus mattis sem non dictum. Aliquam erat volutpat. In enim neque, faucibus non faucibus in, vestibulum ac odio.

Pellentesque facilisis aliquam aliquam. Nam consectetur augue eros, non imperdiet neque varius at. Nullam in sapien finibus, convallis mi non, consectetur ex. Aliquam erat volutpat. Cras feugiat, augue ac cursus imperdiet, sapien quam pretium mi, venenatis pretium ante lacus eu ipsum. Ut tincidunt, arcu sed bibendum varius, lacus urna elementum risus, dictum elementum dui felis sit amet est. Quisque sit amet diam molestie, porttitor diam eget, scelerisque eros. Mauris lacinia eu mi ut pulvinar. Nam sodales est pellentesque, pretium lectus quis, mollis libero. Nulla rutrum nibh eget semper lobortis. Duis sit amet justo aliquet, feugiat magna vel, aliquet augue. Nunc ultricies, ex et mollis maximus, risus justo blandit tellus, consectetur hendrerit sapien tellus a quam.

In consectetur felis vel purus sollicitudin, a lacinia lacus finibus. Phasellus eget ex eget felis semper ultrices vel sed lectus. Quisque posuere sagittis eros, nec luctus quam tincidunt dignissim. Mauris sed feugiat sapien, eget aliquet quam. Donec pellentesque arcu et vehicula imperdiet. Donec eget magna pulvinar, laoreet felis a, vulputate tellus. Etiam sit amet ex eleifend, ullamcorper augue dictum, accumsan risus. Etiam volutpat mollis massa sit amet pretium. Pellentesque venenatis, tortor a consequat semper, elit nulla auctor mi, in pretium odio mi vitae ante. Donec lectus lectus, tempor ut volutpat id, elementum quis quam. Fusce non venenatis lorem. Etiam leo nunc, suscipit quis lorem a, rhoncus sollicitudin mauris. In facilisis diam leo, et dignissim justo lacinia id Lalji.
  </div>
</div>

Answer 2

您可以通过减去第一格100vh来手动添加height and padding的设置高度

.container .box-1 {
  background-color: green;
  overflow: auto;
  height:90px;
}

.container .box-2 {
  background-color: blue;
  overflow: auto;
  height:calc(100vh - 170px);
}

html,
body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
}

.container .box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
}

.container .box-1 {
  background-color: green;
  overflow: auto;
  height:90px;
}

.container .box-2 {
  background-color: blue;
  overflow: auto;
  height:calc(100vh - 170px);
}

<div class="container">
  <div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="box box-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum ligula sed ipsum commodo, a consequat turpis commodo. Phasellus sed leo gravida, sodales orci eget, pellentesque eros. Curabitur pharetra dui in magna efficitur, vel aliquam arcu congue. Cras gravida nunc non erat ullamcorper ultricies. Integer dictum semper diam, nec suscipit odio lobortis in. Pellentesque sed faucibus sapien. Ut vel purus rutrum, malesuada sapien vehicula, finibus quam. Aenean at mollis turpis. Phasellus bibendum nulla ac lobortis consequat. Mauris eget eros sollicitudin, ultricies magna vitae, maximus ligula. Nunc rhoncus mattis sem non dictum. Aliquam erat volutpat. In enim neque, faucibus non faucibus in, vestibulum ac odio.

Pellentesque facilisis aliquam aliquam. Nam consectetur augue eros, non imperdiet neque varius at. Nullam in sapien finibus, convallis mi non, consectetur ex. Aliquam erat volutpat. Cras feugiat, augue ac cursus imperdiet, sapien quam pretium mi, venenatis pretium ante lacus eu ipsum. Ut tincidunt, arcu sed bibendum varius, lacus urna elementum risus, dictum elementum dui felis sit amet est. Quisque sit amet diam molestie, porttitor diam eget, scelerisque eros. Mauris lacinia eu mi ut pulvinar. Nam sodales est pellentesque, pretium lectus quis, mollis libero. Nulla rutrum nibh eget semper lobortis. Duis sit amet justo aliquet, feugiat magna vel, aliquet augue. Nunc ultricies, ex et mollis maximus, risus justo blandit tellus, consectetur hendrerit sapien tellus a quam.

In consectetur felis vel purus sollicitudin, a lacinia lacus finibus. Phasellus eget ex eget felis semper ultrices vel sed lectus. Quisque posuere sagittis eros, nec luctus quam tincidunt dignissim. Mauris sed feugiat sapien, eget aliquet quam. Donec pellentesque arcu et vehicula imperdiet. Donec eget magna pulvinar, laoreet felis a, vulputate tellus. Etiam sit amet ex eleifend, ullamcorper augue dictum, accumsan risus. Etiam volutpat mollis massa sit amet pretium. Pellentesque venenatis, tortor a consequat semper, elit nulla auctor mi, in pretium odio mi vitae ante. Donec lectus lectus, tempor ut volutpat id, elementum quis quam. Fusce non venenatis lorem. Etiam leo nunc, suscipit quis lorem a, rhoncus sollicitudin mauris. In facilisis diam leo, et dignissim justo lacinia id.
  </div>
</div>

Answer 3

为您的yaml创建一个列flexbox 并将container添加到flex: 1元素-请参见下面的演示：

box-2

html,
body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  display: flex; /* added */
  flex-direction: column; /* added */
}

.container .box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
}

.container .box-1 {
  background-color: green;
  /*overflow: auto;*/ 
}

.container .box-2 {
  background-color: blue;
  overflow: auto;
  /*height: 100%;*/
  flex: 1; /* added */
}