使用flexbox和100％的高度

Question

I am using flexbox and trying to get six divs to take up the remaining height of the page. 我正在使用flexbox并尝试获取六个div来占用页面的剩余高度。 Two issues I am having: 我遇到两个问题：

I am having trouble getting the six divs to take up the remainder of the height, but no more. 我很难让六个div占据其余的高度，但是没有更多。
I am getting a white margin at the top of the page 我在页面顶部出现空白

My code looks like this: 我的代码如下所示：

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

I have tried using various styles such as flex-grow, stretch, and height of 100% to the body. 我尝试使用各种样式，例如弹性增长，拉伸和身体100％的高度。 However, none of these seem to be doing the trick. 但是，这些似乎都无法解决问题。 What am I doing wrong? 我究竟做错了什么？

Answer 1

The white space on the top caused by the default margins, you remove those with 由默认页边距引起的顶部空白，请删除带有

*{
    margin:0;
}

The one in the bottom caused by the height: 100%; 高度引起的底部中的一个：100％； on the main container see that it's display is flex it'll 100% height of the viewports height, but since there's an h1 pushing, the #main is being pushed therefore the children with height 100% are pushed aswell, you can either remove the height 100% from the #all or remove h1. 在主容器上看到它的显示是可弯曲的，它将是视口高度的100％，但是由于有一个h1推动，＃main被推动了，因此高度为100％的子代也被推动了，您可以移除将#all的高度调高100％或删除h1。

I removed the height 100% from #id, because an element's height should be defined by it's content. 我从#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

I came up with the following solution. 我想出了以下解决方案。 It requires using display: flex twice and to set the h2 to display as flex: 0 and the remainder to display as flex: 1 . 它需要使用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 个解决方案

解决方案1
2 2018-05-04 20:18:29

解决方案2
0 2018-05-04 20:16:31

使用flexbox和100％的高度

问题描述

2 个解决方案

解决方案1 2 2018-05-04 20:18:29

解决方案2 0 2018-05-04 20:16:31

解决方案1
2 2018-05-04 20:18:29

解决方案2
0 2018-05-04 20:16:31