代码之家 › 专栏 › 技术社区 › Hide

高度100%不起作用

css html

Hide · 技术社区 · 6 年前

我做的网站和代码结构在这里。

<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时,它会像这样溢出。

( <科室; 标签的背景色是浅灰色和 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;
}

我怎样才能解决这个问题?

谢谢。

3 回复 | 直到 6 年前

SaikaVA 6 年前

将“高度”更改为“最小高度”。

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

Friday Ameh 6 年前

移除高度 .section-home 解决问题

 .section-home {
            display: flex;
            flex-shrink: 0;
            flex-wrap: wrap;
            justify-content: center;
            /*height: 100%;*/
        }