Question

我正在创建一个包含大约10个用户可以滚动的部分的页面。

我需要将这些部分设置为全高，换句话说，无论屏幕尺寸或类型如何，都要填满浏览器。

这些部分的CSS如下所示：

.scrollsections {
  display: block;
  position: relative;
  width: 100%;
  height: 500px;
}

HTML和Body的CSS也如下所示：

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

根据我能找到的一切，这应该可以解决问题，但事实并非如此。

网站是www.xenova.tv/site/plus。

Answer 1

您可以使用vh属性，但遗憾的是partial browser support 如果您需要支持不支持它的浏览器，您可以尝试使用this之类的polyfill，或为其他浏览器添加回退高度值。

有关使用这些单位的更多信息，请参阅css-tricks上的this article。

Answer 2

使用Jquery，您应该从窗口设置height属性并在调整大小触发器中调用此方法例如：

$(document).ready(function () {
        $(window).load(function () {
            setSize();
        });

        $(window).resize(function () {
            setSize();
        });
    });

    function setSize() {
        $("#div").height($(window).height() - 20);
    }

100％高度部分取决于屏幕？

2 个答案: