使用 flexbox 和 100% 高度答案

【问题标题】：Using flexbox and 100% height使用 flexbox 和 100% 高度
【发布时间】：2018-05-05 06:37:35
【问题描述】：

我正在使用 flexbox 并试图让六个 div 占据页面的剩余高度。我有两个问题：

我无法让六个 div 占据剩余的高度，但不能再增加了。
页面顶部出现白边

我的代码如下所示：

<!DOCTYPE html>
<html>
<style>

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;

}

h2 {
    text-align: center;
}

#all {
    background-color: red;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#main {
    display: flex;
    width: 80%;
    margin: 10px auto;
    height: 100%;
}

.category {
    border: solid black 2px;
    flex: 1;
    flex-grow: 1;
    margin: 0px 20px;
    height: 100%;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

</style>
<div id="all">
  <h2>My page</h2>
  <div id="main">

    <div class="category">Category 1</div>
    <div class="category">Category 2</div>
    <div class="category">Category 3</div>
    <div class="category">Category 4</div>
    <div class="category">Category 5</div>
    <div class="category">Category 6</div>

  </div>
</div>
</html>

我尝试过使用各种样式，例如 flex-grow、stretch 和 100% 到身体的高度。然而，这些似乎都没有奏效。我做错了什么？

【问题讨论】：

顶部的空白是h2的边距造成的
嗯，您似乎是对的，但是当 h2 包含在 div 中时，为什么会出现这种情况？似乎 h2 的边距出现在 div 之外。如果我删除 div，似乎还有很小的余量。
边距就是这样工作的。
所以您是说子对象的边距出现在它们包含的父 div 之外？
它们影响父元素的位置。

标签： html css flexbox

【解决方案1】：

默认边距造成的顶部空白，你用

去掉

*{
    margin:0;
}

由高度引起的底部的那个：100%；在主容器上看到它的显示是 flex 它将 100% 高度的视口高度，但由于有一个 h1 推动，#main 被推动，因此高度为 100% 的孩子也被推动，你可以删除#all 的高度 100% 或删除 h1。

我从#id 中删除了 100% 的高度，因为元素的高度应该由它的内容定义。

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

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;

}
h2 {
    text-align: center;
}

#all {
    background-color: red;
    width: 100%;
    /* height: 100%; */
    margin: 0px;
    padding: 0px;
}

#main {
    display: flex;
    width: 80%;
    margin: 10px auto;
    height: 100%;
}

.category {
    border: solid black 2px;
    flex: 1;
    flex-grow: 1;
    margin: 0px 20px;
    height: 100%;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

<div id="all">
  <h2>My page</h2>
  <div id="main">

    <div class="category">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="category">Category 2</div>
    <div class="category">Category 3</div>
    <div class="category">Category 4</div>
    <div class="category">Category 5</div>
    <div class="category">Category 6</div>

  </div>
</div>

【讨论】：

您可能会注意到底部有轻微的空白，这是由您的 20px 边距引起的，我没有删除，这并不是真正必要的
不错的解决方案。您还可以将此“重置”样式表链接到您的站点。还有很多其他的。 reset.css
查看您的代码 sn-p，这些框不会填充到浏览器窗口的底部，这正是我所追求的。我发布了另一个似乎可行的解决方案。
哦，你想让盒子填满窗口，甚至是空的，你没有指出，问题是关于空白的。
@ZohirSalakCeNa 我很确定在我的问题中多次指定了这一点，包括第一句话和第二个要点。这只是提到空白的第一个要点。

【解决方案2】：

我想出了以下解决方案。它需要使用两次display: flex，并将h2设置为flex: 0，其余设置为flex: 1。

<!DOCTYPE html>
<html>
<style>

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;

}


#all {
    background-color: red;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
}


h2 {
    flex: 0;
    text-align: center;
}

#main {
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 80%;
    margin: 10px auto;
    height: 100%;
}

.category {
    border: solid black 2px;
    flex: 1;
    margin: 0px 20px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

</style>

<div id="all">
<h2>My page</h2>
  <div id="main">

    <div class="category">Category 1</div>
    <div class="category">Category 2</div>
    <div class="category">Category 3</div>
    <div class="category">Category 4</div>
    <div class="category">Category 5</div>
    <div class="category">Category 6</div>

  </div>
</div>
</html>

【讨论】：