Question

我正在使用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>

我尝试过使用各种款式，例如柔韧增长，伸展，身高100％。然而，这些似乎都没有做到这一点。我做错了什么？

Answer 1

由默认边距引起的顶部空白区域，您将删除

*{
    margin:0;
}

由高度引起的底部：100％;在主容器上看到它的显示是flex它将是视口高度的100％高度，但是因为有一个h1推动，所以#main被推动因此高度100％的孩子被推动，你可以移除高度100％来自#all或删除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>

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

使用flexbox和100％高度

2 个答案: