相对于屏幕的高度但固定

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>

在整页中查看代码段。

Answer 1

您可以将最小高度添加到 div，这样它就不会自行调整超出特定高度。

像这样

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

<div>
</div>

Answer 2

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>