html - 相对于屏幕的高度但固定

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

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>