Question

header,
nav,
main {
  border: 1px solid red;
}

.row {
  display: flex;
  flex: 0 0 100%;
}

.col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.col_3 {
  flex: 0 0 25%;
}

<html>
  <hedad></hedad>

  <body>
    <div>
      <header>Header</header>
      <div class="row">
        <div class="col col_3">
          <nav>
            <ul>
              <li>One</li>
              <li>Two</li>
              <li>Three</li>
            </ul>
          </nav>
        </div>
        <div class="col">
          <main>main</main>
        </div>
      </div>
    </div>
  </body>

</html>

鉴于附加了标记，无论如何我只能使用css并且不使用固定高度来使用侧边栏<nav>元素和main元素来填充视口底部的可用高度？

Answer 1

您需要定义至少一些height:100%或使用vh单位。这是一个例子：

＆＃13;

body,
html,
nav,
main {
  height: 100%;
}
* {
  box-sizing:border-box;
}
body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

header,
nav,
main {
  border: 1px solid red;
}

.row {
  display: flex;
  flex: 1;
}

.col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.col_3 {
  flex: 0 0 25%;
}

＆＃13;

<header>Header</header>
<div class="row">
  <div class="col col_3">
    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </div>
  <div class="col">
    <main>main</main>
  </div>
</div>

＆＃13;

以下是使用vh单位的另一个想法：

＆＃13;

nav,
main {
  height: 100%;
}
* {
  box-sizing:border-box;
}
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height:100vh;
}

header,
nav,
main {
  border: 1px solid red;
}

.row {
  display: flex;
  flex: 1;
}

.col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.col_3 {
  flex: 0 0 25%;
}

＆＃13;

<header>Header</header>
<div class="row">
  <div class="col col_3">
    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </div>
  <div class="col">
    <main>main</main>
  </div>
</div>

＆＃13;

使用flexbox将内容拉伸到整个视口

1 个答案: