Question

我有一个div（主要内容区域），上面有2个div（顶部和底部）

我需要在页面上同时显示顶部和底部div，但都需要它们占用相同的空间（50/50）。当它们的内容比可用的可见空间长时，我还需要它们可滚动。

我使2个div在顶部和底部对齐，但是它们并没有占用相同的空间（50/50）。另外，如果其中一个具有比另一个更多的内容，它就会增长，我最终不得不滚动页面，而不是像我想要的那样滚动div。

这是我的代码：

#content {
  height: 100%;
}

#row {
  height: 100%;
  overflow-y: scroll;
}

<div id="content">
  <div id="row">
    top content
  </div>
  <div id="row">
    bottom content
  </div>
</div>

我也这样尝试过flex：

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#row {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
}

<div id="content">
  <div id="row">
    top content
  </div>
  <div id="row">
    bottom content
  </div>
</div>

Answer 1

视点高度（VH）100％

制作主要内容区域（在我的示例中为body），100vh将使其成为页面高度的100%。然后将您的divs设置为50%;

body {
  height: 100vh;
}

#content {
  width: 100%;
  display: inline-block;
  height: 100%;
}

#row {
  color: #fff;
  height: 50%;
  overflow-y: scroll;
  background: #3b5998;

}

#row:first-of-type {
    background: red;
}
#row p {
padding-left:10px;
}

<body>
  <div id="content">
    <div id="row">
      <p>Top Content</p>
    </div>
    <div id="row">
      <p>Bottom Content</p>
    </div>
  </div>
</body>

body {
  height: 100vh;
}

#content {
  width: 100%;
  display: inline-block;
  height: 100%;
}

#row {
  color: #fff;
  height: 50%;
  overflow-y: scroll;
  background: #3b5998;
}

#row:first-of-type {
  background: red;
}

#row p {
  padding-left: 10px;
}

<body>
  <div id="content">
    <div id="row">
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
    </div>
    <div id="row">
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
    </div>
  </div>
</body>

Answer 2

这里是使用flexbox的方法：

#content {
  height: 300px;
  width: 400px;
  display: flex;
  flex-direction: column;
  background-color: red;
  margin: auto;
  padding: 10px;
}

#top, #bottom {
  flex: 1;
  overflow-y: auto;
}

#top { background-color: yellow; }
#bottom { background-color: green; }

<div id="content">
  <div id="top">
    Sed pharetra lectus id dignissim interdum. Aliquam et tincidunt diam. Ut vitae cursus ipsum. Integer non felis ex. Nunc eget eros eros. Nam aliquet fermentum quam, pretium auctor nisl aliquet molestie. Cras gravida at velit dapibus porttitor.
  </div>
  
  <div id="bottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus magna tellus, malesuada at tempor a, commodo ut lacus. Integer tincidunt neque nunc, a rhoncus felis luctus nec. Nulla in ante nisl. Donec vel erat at sapien maximus tincidunt. Proin ac metus id diam consequat congue. Nulla ac vulputate erat. Vestibulum dui metus, egestas nec lorem ac, venenatis aliquet est. Nulla facilisi. Integer justo massa, vulputate non mauris et, venenatis gravida leo. Vestibulum sagittis suscipit gravida. Duis in viverra dui.
    Sed pharetra lectus id dignissim interdum. Aliquam et tincidunt diam. Ut vitae cursus ipsum. Integer non felis ex. Nunc eget eros eros. Nam aliquet fermentum quam, pretium auctor nisl aliquet molestie. Cras gravida at velit dapibus porttitor. Aliquam aliquam est eu aliquam tincidunt. Maecenas volutpat pellentesque est, non imperdiet ante rutrum ut. Praesent vehicula dui ligula, sit amet ornare tortor ultrices eu. Nullam in tortor at nunc tristique fermentum. Donec justo mi, ultrices sed finibus id, finibus non nibh. Nunc sodales, nibh id porta iaculis, velit sapien vehicula purus, sit amet faucibus augue lectus at massa. Cras nec mauris eu sapien fermentum condimentum sed nec neque.
  </div>
</div>

flex: 1;和#top的{{1}}属性告诉他们相等地共享空间。使用#bottom时，它们不会长出overflow-y: auto;，因此保持相同的高度。

Answer 3

无需为此使用弹性框。您可以使用vh单位将行的高度设置为视口的50％：

.row {
  height: 50vh;
  padding: 5px;
  overflow-y: auto; /* Or scroll if you want to always display the scrollbar */
}

.top {
  background-color: #FFCDD2;
  color: #B71C1C
}

.bottom {
  background-color: #BBDEFB;
  color: #0D47A1
}

<div class="content">
  <div class="row top">top content</div>
  <div class="row bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

附带说明：html ID应该是唯一的，如果您需要多个具有相同ID的元素，则应使用一个类

列中的可独立滚动的DIV

3 个答案:

视点高度（VH）100％