将 vh 与 flexbox 一起使用时如何修复组件拉伸？答案

【问题标题】：How to fix Component-Streching when using vh with flexbox?将 vh 与 flexbox 一起使用时如何修复组件拉伸？
【发布时间】：2019-09-24 20:40:04
【问题描述】：

我正在尝试使用 flexbox 布局来布局网站。主要目标是有一个页眉、一个页脚和一个向左的导航。主要部分和侧面部分应放置在中间和右侧。到目前为止，我使用以下方法让它工作：

html {
    font-family: sans-serif;
    font-size: 1rem;
}

* {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    margin: 0;
}

html * {
    /* debugging */
    border: 1px dotted hotpink;
}

body {
    display: flex;
    flex-flow: row wrap;
   /* height: 100vh; */
}

nav {
    width: 10%;
}

main {
    width: 75%;
}

aside {
    width: 15%;
}

header, footer {
    width: 100%;
    text-align: center;
    background-color: hotpink;
}

main {
    flex: 1 1 auto;
}

nav {
    background-color: lightblue;
}

nav ul {
    display: flex;
    flex-flow: column nowrap;
    list-style-type: none;
}

nav ul li:hover {
    background-color: royalblue;
}

nav ul li a {
    display: block;
    text-decoration: none;
    padding: 0.5em;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>
    <header>
        <h1>THIS IS THE REALLY BIG HEADER</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
            <li><a href="#">menu5</a></li>
        </ul>
    </nav>
    <main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga unde consequatur laborum cupiditate odio ipsa
        cumque, dolorem temporibus aut ipsam commodi autem maiores delectus non vitae recusandae magni consequuntur ab!
    </main>
    <aside>aside</aside>
    <footer>(c) by me</footer>
</body>
</html>

但是：使用线路时 /* 高度：100vh； */ 所有组件都被拉伸以使用整个屏幕高度。我的意图是让导航、主要和侧面拉伸，但让页眉和页脚只使用他们需要的空间。我怎样才能做到这一点？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以执行以下操作：

1) 为<body>标签属性设置

flex-flow: column;
min-height: 100vh;

2) 为标签<nav>、<main>、<aside>添加包装器并为此属性设置

flex-grow: 1;
display: flex;

结果

html {
  font-family: sans-serif;
  font-size: 1rem;
}

* {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  margin: 0;
}

html * {
  /* debugging */
  border: 1px dotted hotpink;
}

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

nav {
  width: 10%;
}

main {
  width: 75%;
}

aside {
  width: 15%;
}

header,
footer {
  width: 100%;
  text-align: center;
  background-color: hotpink;
}

main {
  flex: 1 1 auto;
}

nav {
  background-color: lightblue;
}

nav ul {
  display: flex;
  flex-flow: column nowrap;
  list-style-type: none;
}

nav ul li:hover {
  background-color: royalblue;
}

nav ul li a {
  display: block;
  text-decoration: none;
  padding: 0.5em;
}

.page {
  flex-grow: 1;
  display: flex;
}

<header>
  <h1>THIS IS THE REALLY BIG HEADER</h1>
</header>
<div class="page">
  <nav>
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
    </ul>
  </nav>
  <main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga unde consequatur laborum cupiditate odio ipsa cumque, dolorem temporibus aut ipsam commodi autem maiores delectus non vitae recusandae magni consequuntur ab!
  </main>
  <aside>aside</aside>
</div>
<footer>(c) by me</footer>

CodePen 上的代码相同

【讨论】：

让我试着理解你的想法：你将“中间”部分包裹在另一个 flex-container 中，并使其根据页面的大小而增长，而页眉和页脚元素放在一个不调整大小的容器。我说对了吗？
我没有使用你的确切代码，但这为我指明了正确的方向。使用 2 个 flex 容器完全有效。谢谢！

【解决方案2】：

这样做：

body { 
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}

【讨论】：

这使得页眉和页脚只使用所需的空间，但现在页脚不再与页面底部对齐，并且“中间”部分不再延伸八倍。
那么请阅读 flexbox 文档 :) 您可以在项目上使用 align-self 或在页脚上使用 margin-bottom:0px 等...去试试吧。