如果将html和body_height设置为100%，它将覆盖整个页面。

如果您将任何特定的div最小高度设置为100%，那么它将覆盖整个窗口，如下所示：

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

回想起

只有当div的直接父级是body时，这才有效，因为百分比总是从直接父级继承的，通过执行上面的CSS代码，您告诉div从直接父（body）继承100%的高度，并使其成为您的最小高度：100%。

另一种方式

只需将div高度设置为100vh。这意味着视口高度为100。

CSS

div#some-div {
  height: 100vh
}

这就是对我有用的：

<div style=“位置：固定；顶部：0px；左侧：0px，底部：0px

使用position:fixed而不是position:absolute，这样即使向下滚动分区也会扩展到屏幕的末尾。

这是一个高度修正。

在CSS中使用：

#your-object: height: 100vh;

对于不支持vh单元的浏览器，请使用modernizr。

添加此脚本（为vh单元添加检测）

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
        var height = parseInt(window.innerHeight/2, 10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"], 10);

        bool = !!(compStyle == height);
    });
    return bool;
});

最后，如果浏览器不支持vh单位，请使用此函数将视口的高度添加到#your object：

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height()) + 'px'});
    }
});

如果你能绝对定位你的元素，

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

你需要做两件事，一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

来源

整个页面称为“视口”，您可以根据CSS 3中的视口设计元素。

这种单位称为视口百分比长度，与初始包含块的大小相关。

视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin（视口最小长度）和vmax（视口最大长度）。

因此，现在，您的问题可以通过在CSS中添加以下内容轻松解决：

.classname-for-right-div /* You could also use an ID */ {
  height: 100vh;
}

以下是有关视口相对长度的信息。