gpt4 book ai didi

html - 高度 100% 不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 01:13:39 25 4
gpt4 key购买 nike

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

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

enter image description here

(<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;
}

我该如何解决这个问题?

谢谢。

最佳答案

将高度更改为最小高度。

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

关于html - 高度 100% 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50684252/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com