Question

我想要一个完全覆盖我的页面的div，但是当我调整浏览器窗口的大小时，我不希望div可以调整大小。换句话说，这个100％的高度不应该是指实际的窗口大小，而是指最大窗口大小。

我想计算浏览器窗口的最大高度，我希望我的div有这个高度。它应该是一个固定的高度，所以如果我调整窗口大小应该会出现一个滚动条，让我滚动内容

例如：如果您访问此网站http://weareflourish.com/，其主页上会有一个背景，其背景完全覆盖页面（即使您访问的网站具有不同的分辨率）。我想重现相同的效果

Answer 1

纯css无法做到这一点。

您有三个不同的值：

屏幕分辨率（已修复）
浏览器维度（动态）
视口尺寸（动态）

您无法依赖屏幕分辨率，因为您无法保证这是视口的实际大小。如果您依赖于浏览器或视口尺寸，则会遇到动态大小，这会在浏览器调整大小时发生变化。

您唯一能做的就是通过javascript确定视口大小，并将div设置为此特定大小。这样它就不会改变视口大小。

＆＃13;

let div = document.querySelector("#yourElement"),
height = window.innerHeight, width = window.innerWidth;

div.style.height = `${height}px`;
div.style.width = `${width}px`;

＆＃13;

div{
border:1px solid red;
box-sizing:border-box;
}
html,body,div{margin:0;padding:0;}

＆＃13;

<div id="yourElement">
</div>

＆＃13;

更复杂的方法是获取屏幕分辨率，计算浏览器和视口大小的差异，并从屏幕分辨率中减去它。这可能会给你一个很好的估计最大视口大小，但我不知道这是多么强大的跨平台。

我知道您可能有理由尝试这样做，但如果这是解决问题的好方法或必要方法，那么您应退后一步。

Answer 2

首先使用CSS视口高度（<div>）设置vh的高度。在CSS中执行此操作，以便它在页面加载时的高度正确。

div.fullheight {
  height: 100vh;
}

然后使用jQuery以像素为单位取高度，并将其重新应用为高度CSS。

$('div.fullheight').css('height', $('div.fullheight').height());

Div高度100％但不可调整大小

2 个答案: