始终具有全高的列

Question

我正在创建一个html/Angular应用程序。我正在使用Twitter bootstrap 4进行布局。我有三列1-2-9，我需要它们都是1)相同的高度2)始终是整个窗口的高度。

我用100vh解决了这个问题，看起来不错，但问题是，因为我的应用程序可以在长长的列表中添加动态内容，所以列"stop“是整个屏幕的高度(因为100vh在第一次加载页面时会计算高度)。

无论我向窗口/浏览器添加了多少动态内容，如何才能确保列始终自动调整为窗口/浏览器的完整高度？

Answer 1

我认为您希望在固定的100vh列中滚动动态内容。如果是这样的话，您可以将内部动态内容包装在div中，并将overflow属性用于更大的数据。

示例：

HTML：

<div class="row">
  <div class="col-md-1 col-lg-1 col-xl-1 column column-first">
    <div class="scrollable-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>End</p>
    </div>

  </div>
  <div class="col-md-2 col-lg-2 col-xl-2 column column-second">
    <div class="scrollable-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>End</p>
    </div>
  </div>
  <div class="col-md-9 col-lg-9 col-xl-9 column column-third">
    <div class="scrollable-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
    <p>End</p>
    </div>
  </div>
</div>

CSS：

.column{
  height: 100vh;
  overflow-x: hidden;
}
.scrollable-text{
  width: calc(100% + 30px);
  overflow-y: scroll;
  box-sizing: border-box;
  height: 100%;
}
.column-first{
  color: #fff;
  background-color: #02547D;
}
.column-second{
  color: #fff;
  background-color: #0285A8;
}
.column-third{
  color: #fff;
  background-color: #02BEC4;
}

CodePen：https://codepen.io/debrajr/pen/gqZbpx