Height relative to screen but fixed

Question

I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ). I will make it resizable with jQuery resizable.

The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same. Any idea what to do?

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

<div>
</div>

View the snippet in full page.

Answer 1

1. vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.

2. Next (The resizing part) can be done with CSS resize property. **PS: In the div bottom right corner you can see the resize icon and do the resizing.

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>