时间戳

首页 > 解决方案 > 高度 100% 不起作用

html - 高度 100% 不起作用

问题描述

我做了网站，代码结构在这里。

<body>
   <header></header>
   <section></section>
   <footer></footer>
</body>

在<section>，我定义height: 100%但它不能正常工作。

详细的部分标签在这里。

<section>
   <div class="section-home">
      <div class="menubox">1</div>
      <div class="menubox">1</div>
      <div class="menubox">1</div>
      <div class="menubox">1</div>
      <div class="menubox">1</div>
      <div class="menubox">1</div>
   </div>
</section>

当我创建很多 .box 时，它会像这样溢出。

在此处输入图像描述

（<section>标签的背景色是浅灰色和footer白色）

[CSS]

html, body {
    width: 100%;
    height: 100%;
}
section {
    width: 100%;
    height: 100%;
}
.section-home {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%;
}
.menubox {
    height: 350px;
    width: 300px;
    margin: 20px;
    border: 0px solid lightgray;
    border-radius: 0.5rem;
    background-color: white;
    padding: 10px;

    -moz-box-shadow: 0px 5px 5px lightgray;
    -webkit-box-shadow: 0px 5px 5px lightgray;
    box-shadow: 0px 5px 5px lightgray;
}

我该如何解决这个问题？

谢谢。

标签： htmlcss

解决方案

将高度更改为最小高度。

section {
  width: 100%;
  min-height: 100%;
}

推荐阅读