时间戳

首页 > 解决方案 > 如何使引导列高度为剩余屏幕高度

html - 如何使引导列高度为剩余屏幕高度

问题描述

我有一个带有导航栏、侧边栏和主要内容内的表格的网页。我的简化代码如下：

<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;
}

我打算让身体始终拥有屏幕的高度。当桌子很小时，这是可以实现的，但是当桌子溢出时，身体的高度会增加。我如何使它content只占用屏幕的剩余高度，并且任何溢出（来自表格）都被占用main-content而不是身体？

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

标签： htmlcsstwitter-bootstrapheight

解决方案

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

@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>

推荐阅读