Calculate window.innerHeight in css

Is there a way to get this in CSS using var and calc ?

document.getElementById('my-modal').style.height = (window.innerHeight - 200) + "px";

I wonder if this is equivalent - height: calc(100vh - 200px);

That will get the viewport height minus 200px.

That will be quite small on small screens though :slight_smile:

I’m actually trying to get a modal designed in TailWindCSS to be of full screen height (maybe some 20px padding for whole screen) even if the content is blank.

Yes vh and calc should do what you want.

What problem are you having?

I was just wondering if 100vh is equivalent to window.innerHeight

Does it matter?

You are only interested in your current viewport height which is what you get in css with 100vh.

I believe inner-height is the same but of course isn’t right if the browser is resized afterwards unlike css unless you are constantly monitoring resize which is a pain.

Most modals are fixed positioned so in effect you don’t need a height anyway. You can just do this.

.modal {
  width: 70%;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 100px;
  background: red;
  box-shadow:0 0 20px 20px rgba(0,0,0,0.5)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.