高度 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;
}
我该如何解决这个问题？
谢谢。
赛卡VA
将高度更改为最小高度。
section {
width: 100%;
min-height: 100%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
- 上一篇：Jenkins 库：java.lang.NullPointerException：无法在空对象上调用方法 xxx
- 下一篇：错误：任务 ':app:processDebugResources' 的执行失败。>（第 3485 行，第 33 列）解析错误。找到“-”，应为“(”
相关文章
Related 相关文章
- 1
Bootstrap 3.0高度100％不起作用
- 2
高度100％，多列不起作用
- 3
断面高度100％不起作用
- 4
SVG 100％文档高度不起作用
- 5
div至100％高度不起作用
- 6
CSS div高度100％不起作用
- 7
SVG 100％文档高度不起作用
- 8
为什么100％的高度不起作用
- 9
高度100％在CSS中不起作用
- 10
CSS高度：100％不起作用
- 11
高度100％，底部填充不起作用
- 12
div css 高度 100% 不起作用
- 13
css 高度~最小高度：100% 不起作用
- 14
为什么高度（100％）和宽度（100％）不起作用？
- 15
div高度：100％，显示：flex在Chrome中不起作用
- 16
HTML / body上的高度100％在iPhone上不起作用
- 17
div高度为100％，页脚不起作用
- 18
div高度100％不起作用-引导程序
- 19
html中的按钮元素的100％高度不起作用
- 20
右侧边栏高度100％不起作用
- 21
div高度：100％，显示：flex在Chrome中不起作用
- 22
CSS背景颜色高度100％不起作用
- 23
高度：使用语义UI时100％不起作用
- 24
高度（最小高度）100％在内容溢出时不起作用？
- 25
高度（最小高度）100％在内容溢出时不起作用？
- 26
高度：表格单元中的100％在Firefox和IE上不起作用
- 27
Angular-Phonegap-“最低高度：100％”根本不起作用
- 28
垂直居中不起作用，因为行未达到100％的高度
- 29
高度：100％在带有flex-grow的flexbox内不起作用
我来说两句