Question

我无法弄清楚为什么这不起作用。

我需要将HTML和body的高度设置为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％然后页面滚动但高度（需要基于百分比）不起作用。如何解决这个问题的任何帮助将不胜感激。

我通过谷歌搜索找到的所有帖子以及查看我在其他项目中的代码都没有为此问题提供解决方案。

Answer 1

＆＃13;

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

＆＃13;

 <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>

＆＃13;

添加了样式元素和div容器＆amp;接受评论//

Answer 2

实际上，它不会滚动，因为它应该占用100％的视口高度。
您的css评论格式错误，请改用/* comment */。

段：

html,
body {
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f7f7f7;
  overflow: scroll;
}
.row1 {height: 15%;} /* header */
.row2 {height: 70%;} /* body */
.row3 {height: 15%;} /* footer */

<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>

Answer 3

您可以试用此代码。浏览器屏幕尺寸不同。所以我们根据浏览器屏幕尺寸设置高度。

Jquery

$(document).ready(function(){

var height =$( window ).height();
alert(height);
var height1 =($( window ).height() *15)/100
var height2 =($( window ).height() *70)/100

$('.row1').css("height",height1);
$('.row2').css("height",height2);
$('.row3').css("height",height1);
})

将HTML高度设置为100％消除了滚动

3 个答案: