将HTML高度设置为100％将消除滚动 [英] Setting HTML height to 100% eliminates scrolling
问题描述
我无法弄清楚为什么这不起作用。
我需要将HTML和body的高度设置为100％，以便设置页面内三行的高度，但是当我这样做时，它会消除滚动，特别是在移动设备上，但在调整大小时甚至在某些浏览器窗口大小上。
data-console =truedata-babel =false> html ，身体{身高：100％;显示：块;保证金：0;填充：0; background-color：＃f7f7f7;溢出：滚动; } .row1 {height：15％;} // header .row2 {height：70％;} // body .row3 {height：15％;} // footer
< html> <身体GT; < div class =row1> ...需要达到15％的高度< / div> < div class =row2> ...需要达到70％的高度< / div> < div class =row3> ...需要达到15％的高度< / div> < /体> < / html>
那么页面会滚动，但高度（需要基于百分比）不起作用。任何关于如何解决这个问题的帮助将不胜感激。
我从google搜索到的所有帖子看到我在其他项目上的代码都没有提供解决方案问题。
< ; HTML> <身体GT; < div class =container> < div class =row1> ...需要达到15％的高度< / div> < div class =row2> ...需要达到70％的高度< / div> < div class =row3> ...需要达到15％的高度< / div> < DIV> < /体> < / html>
新增样式元素和div容器&接受评论//
I cannot figure out why this is not working.
I need to set the height of HTML and body to 100% for some setting the height of the three rows inside the page, but when I do this it eliminates scrolling, specifically on mobile devises but even on some browsers windows sizes when resizing.
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>
If I remove the 100% on HTML then the page scrolls but the height, which needs to be percentage based, does not work. Any help on how to solve that would be greatly appreciated.
All the posts I found from googling and looking at code I have on other projects have not provided a solution for this issue.
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>
Added style element and div container & take of the comment //
这篇关于将HTML高度设置为100％将消除滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
