如何使 bootstrap 列高为剩余屏幕高度

Question

我有一个网页，其中包含导航栏、边栏和主要内容中的 table。我的简化代码如下：

<body>

  <!-- Navbar -->
  <nav class="navbar navbar-dark bg-dark py-2 sticky-top">
    <!-- navbar content -->
  </nav>

  <!-- Actual Content -->
  <div class="container-fluid flex-grow-1">
    <div class="row h-100">

      <!-- Sidebar -->
      <div class="col-lg-3 col-md-4 d-none d-md-flex h-100 flex-column sidebar">
        <!-- sidebar content -->
      </div>

      <!-- Content -->
      <div class="col-lg-9 col-md-8 flex-sm-column">
        <div class="main-content w-100 d-flex flex-grow-1">
          <!-- table with variable height -->
        </div>
      </div>

    </div>
  </div>
<body>

html,
body {
  height: 100vh !important;
  display: flex;
  flex-direction: column;
}

/* FOR SIDEBAR */
.sidebar {
  background-color: white;
  border-right: 1px solid var(--light-grey);
  padding: 0 1.5rem;
}

/* TABLE */
.main-content {
  max-height: 100%;
  overflow: auto;
}

.table {
  margin: 0;
}

我想要发生的是让 body 始终具有屏幕的高度。当 table 较小时，可以实现，但当 table 溢出时，主体的高度会增加。我该如何做到 content 只占用屏幕的剩余高度，并且任何溢出（来自 table）都被占用 main-content 而不是主体？

我尝试将所有内容的高度设置为 100%，并尝试使用 flex-grow 属性，但似乎没有任何效果。请告诉我是否还需要包括更具体的细节，但这就是实际使用维度属性的所有内容。

Answer 1

我会让容器列相对，然后你可以绝对定位你的主要内容来填充列并在内容上自动溢出：

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}


/* FOR SIDEBAR */

.sidebar {
  background-color: white;
  border-right: 1px solid black;
  padding: 0 1.5rem;
}

.relative {
  position: relative;
}

.main-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}

<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark py-2 sticky-top">
  navbar content
</nav>

<!-- Actual Content -->
<div class="container-fluid flex-grow-1">
  <div class="row h-100">

    <!-- Sidebar -->
    <div class="col-lg-3 col-md-4 d-none d-md-flex h-100 flex-column sidebar">
      sidebar content s
    </div>

    <!-- Content -->
    <div class="col-lg-9 col-md-8 relative">
      <div class="main-content">
        table with variable height <br>
        s<br>s<br>s<br>s<br>s<br>s<br> s
        <br>s<br>s<br>s<br>s<br>s<br> s
        <br>s<br>s<br>s<br>s<br>s<br> s
        <br>s<br>s<br>s<br>s<br>s<br>
      </div>
    </div>

  </div>
</div>

如何使 bootstrap 列高为剩余屏幕高度

How to make bootstrap column height to remaining screen height

html

css

height

twitter-bootstrap