CODEWITHSUNDEEP
htmlcssresizeviewport-units
Adi Pîslaru
Adi Pîslaru

Reputation: 149

Height relative to screen but fixed

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.

Upvotes: 1

Views: 3488

Answers (2)

All about JS
All about JS

Reputation: 562

  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>

Upvotes: 2

Anupam Raut
Anupam Raut

Reputation: 358

You can add min-height to div so that it will not resize itself beyond a specific height.

Like this

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

Upvotes: 1

Related Questions