时间戳

首页 > 解决方案 > 使用 flexbox 和 100% 高度

html - 使用 flexbox 和 100% 高度

问题描述

我正在使用 flexbox 并试图让六个 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% 到身体的高度。然而，这些似乎都没有奏效。我究竟做错了什么？

标签： htmlcssflexbox

解决方案

由默认边距引起的顶部空白，您删除那些与

*{
    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>

推荐阅读