如何最好地使用CSS来制作具有高嵌套元素的页面，并将其限制为视口的高度？ HTML CSS

问题描述

如何最好地将页面限制为视口的高度？我想管理子元素上的溢价-y，但似乎无法限制高度-我只能管理以像素或百分比为单位的最大高度。我认为我需要将某些元素的高度限制为视口高度的其余部分（而不是百分比），但是我找不到解决方法。

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

我想也许我可以将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）

实际：页面高度不受限制；内部滚动条无意义；视口滚动条已打开

所需：Page使用视口的整个高度，仅此而已；内部滚动条有效；没有视口滚动条

解决方法

如果您不习惯使用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