Html 使用flexbox和100%高度_Html_Css_Flexbox

Html 使用flexbox和100%高度

html css

Html 使用flexbox和100%高度,html,css,flexbox,Html,Css,Flexbox,我正在使用flexbox并尝试使用六个div来占据页面的剩余高度。我有两个问题：我很难让六个div占据剩下的高度，但没有更多我在这一页的顶部有一个空白我的代码如下所示： <!DOCTYPE html> <html> <style> html, body { height: 100%; margin: 0px; padding: 0px; } h2 { text-align: center; } #all {

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


html，正文{
身高：100%；
边际：0px；
填充：0px；
}
氢{
文本对齐：居中；
}
#全部{
背景色：红色；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
#主要{
显示器：flex；
宽度：80%；
利润率：10px自动；
身高：100%；
}
.类别{
边框：纯黑2px；
弹性：1；
柔性生长：1；
利润率：0px 20px；
身高：100%；
文本对齐：居中；
字体大小：1.2米；
字体大小：粗体；
}
我的页面
第一类
第2类
第3类
第4类
第5类
第6类

我尝试过使用各种风格，如弯曲生长、拉伸和100%到身体的高度。然而，这些似乎都没有奏效。我做错了什么？

我想出了以下解决方案。它需要使用

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>


html，正文{
身高：100%；
边际：0px；
填充：0px；
}
#全部{
背景色：红色；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
显示器：flex；
弯曲方向：立柱；
}
氢{
弹性：0；
文本对齐：居中；
}
#主要{
显示器：flex；
弹性：1；
弯曲方向：行；
宽度：80%；
利润率：10px自动；
身高：100%；
}
.类别{
边框：纯黑2px；
弹性：1；
利润率：0px 20px；
文本对齐：居中；
字体大小：1.2米；
字体大小：粗体；
}
我的页面
第一类
第2类
第3类
第4类
第5类
第6类

由默认边距引起的顶部空白，可以删除带有

*{
    margin:0;
}

由高度引起的底部缺陷：100%；在主容器上，看到它的显示是flex，它将100%显示视口高度，但由于存在h1推送，因此会推送#main，因此也会推送高度为100%的子容器，您可以从#all中删除高度100%或删除h1

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

*{
保证金：0；
框大小：边框框；
}
html，正文{
身高：100%；
边际：0px；
填充：0px；
}
氢{
文本对齐：居中；
}
#全部{
背景色：红色；
宽度：100%；
/*身高：100%*/
边际：0px；
填充：0px；
}
#主要{
显示器：flex；
宽度：80%；
利润率：10px自动；
身高：100%；
}
.类别{
边框：纯黑2px；
弹性：1；
柔性生长：1；
利润率：0px 20px；
身高：100%；
文本对齐：居中；
字体大小：1.2米；
字体大小：粗体；
}


我的页面
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责。
第2类
第3类
第4类
第5类
第6类

顶部的空白是由

h2

Hmm上的边距造成的，您似乎是正确的，但为什么h2包含在div中？h2的边距似乎出现在div之外。如果我删除div，似乎还有一个很小的边距。边距就是这样工作的。所以你是说子对象的边距出现在它们所包含的父div之外？它们会影响父元素的位置。你可能会注意到一点空白在底部，这是因为你的20像素的保证金，我没有删除，这不是真正必要的好办法。您还可以将此“重置”样式表链接到您的站点。还有很多其他的。查看您的代码片段，这些框并没有填充到浏览器窗口的底部，这正是我想要的。我发布了另一个似乎有效的解决方案。哦，你想让盒子填满窗户，即使是空的，但你没有指出，问题是关于空白的。@ZohirSalakCeNa我很确定，我的问题中有几次明确指出了这一点，包括第一句话和第二个要点。这只是第一个提到空白的要点。