CSS：讓內容占據剩余高度，並且其子項平均共享相同的高度

Question

這是 CodeSandbox 的鏈接，代碼如下。

有一個包含一類content的 div，我想占據剩余的高度並讓孩子們分享剩余的高度（2 個孩子 => 都占一半；3 個孩子 => 每個孩子占三分之一等），而占據整個寬度。

我無法為我的生活弄清楚如何做到這一點。 我嘗試了grid和flex方法，但都無法正常工作。

你將如何實現這種布局？

編碼：

index.html ：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app" class="app">
      <h1 class="sr-only">My Title</h1>
      <nav class="nav">
        <li>some</li>
        <li>nav</li>
        <li>items</li>
      </nav>

      <header>
        <h2>
          Where do you want to go?
        </h2>
      </header>

      <!-- Content should take all of the remaining available height -->
      <div class="content">
        <!-- Link 1, 2, and 3 should take a third of content's height each and take up the full width -->
        <a>Link 1</a>
        <a>Link 2</a>
        <a>Link 3</a>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

index.js ：

import "./styles.css";

styles.css ：

body {
  font-family: sans-serif;
}

html,
body {
  height: 100%;
}

.app {
  min-height: 100%;
}

.nav {
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Answer 1

使用flex ：

 body { font-family: sans-serif; } html, body { height: 100%; min-height: 100%; margin: 0; padding: 0; } .app { min-height: 100%; background: #00fa } .app, .content { display: flex; flex-direction: column; } .content { flex: 1; background: #fe0; } .content > a { flex: 1; border:solid 1px; } .nav { display: flex; }

 <div id="app" class="app"> <nav class="nav"> <li>some</li> <li>nav</li> <li>items</li> </nav> <header> <h2> Where do you want to go? </h2> </header> <!-- Content should take all of the remaining available height --> <div class="content"> <!-- Link 1, 2, and 3 should take a third of content's height each and take up the full width --> <a>Link 1</a> <a>Link 2</a> <a>Link 3</a> </div> </div>

CSS：讓內容占據剩余高度，並且其子項平均共享相同的高度

問題描述

1 個解決方案

解決方案1
1 已采納 2022-06-22 19:40:21

CSS：讓內容占據剩余高度，並且其子項平均共享相同的高度

問題描述

1 個解決方案

解決方案1 1 已采納 2022-06-22 19:40:21

解決方案1
1 已采納 2022-06-22 19:40:21