相对于屏幕的高度但固定

Question

我正在尝试将固定位置div粘贴到页面底部，它具有屏幕的起始高度70%（like vh）。 我将使jQuery可调整大小使其可调整大小。

问题在于，如果我应用height: 70vh或height: 70%，则当用户调整浏览器高度时，div会调整大小，并且我希望保持相同。 知道该怎么办吗？

div {
  position: fixed;
  display: block;
  bottom: 0;
  width: 500px;
  height: 70vh;
  background-color: red;
}

<div>
</div>

在整页中查看摘要。

Answer 1

1. vh或%将相对于viewport或屏幕高度的高度。所以我们需要在DOM加载时使用JavaScript设置div的初始高度。

2. 下一步（调整大小部分）可以使用CSS resize属性完成。 ** PS：在div右下角，您可以看到调整大小图标并进行调整大小。

＆＃13;
＆＃13;
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
＆＃13;
div {
  position: fixed;
  bottom: 0px;
  width: 500px;
  background-color: red;
  resize:vertical;
  overflow:auto;
}
＆＃13;
<div id="demo"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以为div添加min-height，以便它不会超出特定高度。

喜欢这个

div {
  position: fixed;
  display: block;
  bottom: 0;
  width: 500px;
  height: 70vh;
  min-height: 500px;
  background-color: red;
}

<div>
</div>