我不明白为什么这不起作用。
我需要将 HTML 和正文的高度设置为 100%，以设置页面内三行的高度，但是当我这样做时，它会消除滚动，特别是在移动设备上，甚至在某些浏览器窗口大小调整大小时也是如此。
html, body {
height: 100%;
display:block;
margin: 0;
padding: 0;
background-color: #f7f7f7;
overflow:scroll;
}
.row1 {height:15%;} // header
.row2 {height:70%;} // body
.row3 {height:15%;} // footer
<html>
<body>
<div class="row1"> ...needs to be 15% height </div>
<div class="row2"> ...needs to be 70% height </div>
<div class="row3"> ...needs to be 15% height </div>
</body>
</html>
如果我删除 HTML 上的 100%，则页面会滚动，但需要基于百分比的高度不起作用。任何有关如何解决该问题的帮助将不胜感激。
我通过谷歌搜索和查看其他项目的代码发现的所有帖子都没有提供此问题的解决方案。
html, body {
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
background-color: #f7f7f7;
overflow:scroll;
}
.container{
height: 100%;
width: 100%;
display:inline-block;
}
.row1 {height:15%;width: 100%;display:inline-block;}
.row2 {height:70%;width: 100%;display:inline-block;}
.row3 {height:15%;width: 100%;display:inline-block;}
<html>
<body>
<div class="container">
<div class="row1"> ...needs to be 15% height </div>
<div class="row2"> ...needs to be 70% height </div>
<div class="row3"> ...needs to be 15% height </div>
<div>
</body>
</html>
添加了样式元素和 div 容器以及注释 //
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
