相对于屏幕的高度但固定

Question

我正在尝试将一个固定位置的 div 粘贴到页面底部，它具有屏幕的起始高度 70% ( like vh )。 我会用 jQuery resizable 来调整它的大小。

问题是，如果我应用height: 70vh 或height: 70%，当用户调整浏览器高度时，div 会调整大小，我想保持不变。 知道该怎么做吗？

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

<div>
</div>

在整页中查看 sn-p。

Answer 1

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

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

document.getElementById("demo").style.height = window.innerHeight*.7+"px";

div {
  position: fixed;
  bottom: 0px;
  width: 500px;
  background-color: red;
  resize:vertical;
  overflow:auto;
}

<div id="demo"></div>

Answer 2

您可以将 min-height 添加到 div，这样它就不会将自身调整到超出特定高度。

这样

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

<div>
</div>