Question

我正在尝试在bootstrap中创建两个并排窗格。整个页面的高度应为100vh，页面没有滚动条。

但是左侧内容标签中应该有一个滚动条。相反，我所拥有的代码并不考虑我的h1元素的高度，并且左侧内容和整个页面都有一个滚动条。我怎样才能使它成为左侧内容框中唯一的滚动条。对不起我的糟糕工作解释，但如果你访问小提琴，这将是非常明显的。

Jsfiddle：https://jsfiddle.net/7uauho0d/1/

HTML：

<div id="pg-container">


  <h1>
  TITLE AT TOP
  </h1>

  <div class="col-xs-8" id="left">
    <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
      <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
    <h1>LEFT CONTENT</h1>
  </div>

  <div class="col-xs-4" id="right">

    <h1>
RIGHT CONTENT
RIGHT CONTENT
   </h1>
  </div>
</div>

CSS：

#pg-container {
  height: 100vh;
}

#left {
  overflow-y: scroll;
  background-color: lightgrey;
  /* When I specify 100% here, I expect it to take into account the <h1> at the top
  so that this element is the height of the viewport minus the height of the title at
  the top. I expect only 1 scrollbar, the one inside left content, there should be no
  scrollbar for the page*/

  height: 100%;
}

#right {
  height: 100%;
}

Answer 1

在使用flexbox的同时，在overflow: hidden的父容器上设置height: 100vh应该有效。

检查这个小提琴：https://jsfiddle.net/7uauho0d/7/

Answer 2

将overflow-y: hidden添加到外部div：

#pg-container {
  height: 100vh;
  overflow-y: hidden
}

如果您想要禁用水平滚动，则可以改为使用overflow: hidden。

顶部的标题栏应始终可见。虽然您始终可以使用position: absolute和top: 0强制执行此操作。

如何强制元素适应100vh

2 个答案: