html - CSS|Bootstrap - 全高列

Question

我尝试设置全高列，但有些问题(我需要在侧边栏上保持最大宽度)

这是我的代码:
CSS:

body,
html {
  height: 100%;
}
.Sidebar {
    background: red;
    height: 100%;
    min-height: 100%;
    max-width: 330px;
    display: block;
}

HTML:

<div class="container">
  <div class="row">
    <div class="col-lg-3 Sidebar">
      <!-- CONTENT -->
    </div>
    <div class="col-lg-8">
      <!-- CONTENT -->
    </div>
  </div>
</div>

JSFiddle

Answer 1

您需要将高度设置为 100vh 而不是 %。这会将其设置为 100% 的视口(viewport)而不是 100% 的内容。

.Sidebar {
    background: red;
    height: 100vh;
    max-width: 330px;
    display: block;
}

JSFiddle