我如何最好地使用 CSS 使包含高嵌套元素的页面限制在视口的高度内？

Question

如何最好地将页面限制在视口的高度内？我想管理子元素上的 overflow-y，但似乎我无法限制高度——我只能管理以像素或百分比为单位的最大高度。我想我需要将某些元素的高度限制为视口高度的剩余部分（不是百分比），但我找不到这样做的方法。

（我正在使用 bootstrap，但我怀疑答案不是以 bootstrap 为中心的。）

我想也许我可以将 flex 与 flex-grow 一起使用，但这也不会限制高度。我错过了什么？

<div class="container d-flex flex-column ">
 <div>
 My full-width page title goes here 
 </div>
  <div class="row flex-grow-1">
    <div class="col col-4">
      potentially long content here
    </div>
    <div class="col-8">
     main content 
    </div>
  </div>
</div>

与CSS

body {
  height: 100vh;
}

.row {
  margin-top: 20px;
}

.col {
  border: solid 1px black;
  padding: 10px;
  overflow-y: scroll;
}

(Fiddle)

实际：页面无限高；内部滚动条没有实际意义；视口滚动条开启

期望：页面使用视口的整个高度，仅此而已；内部滚动条有效；没有视口滚动条

Answer 1

如果您不习惯使用 bootstrap/flexbox，css 网格会让这一切变得非常简单。

HTML

<div class="wrapper">
   <div class="header">
     My full-width page title goes here 
   </div>
   <div class="sidebar">
      sidebar content
    </div>
    <div class="main">
     main content 
    </div>
</div>

CSS

html, body, .wrapper {
  height: 100%;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-auto-rows: min-content auto;
  grid-template-areas: 
    "header header"
    "sidebar main";
}

.header {
  grid-area: header;
  background: red;
}

.sidebar {
  grid-area: sidebar;
  overflow: auto;
}

.main {
  grid-area: main;
}

fiddle

我如何最好地使用 CSS 使包含高嵌套元素的页面限制在视口的高度内？

How do I best use CSS to make a page with tall nested elements to be limited to the height of the viewport?

css

bootstrap-4

flexbox

viewport-units

HTML

CSS