Calculate window.innerHeight in css

[anjanesh1]

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);

[PaulOB]

@anjanesh1

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

[anjanesh1]

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.

[PaulOB]

Yes vh and calc should do what you want.

What problem are you having?

[anjanesh1]

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

[PaulOB]

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.

[PaulOB]

@anjanesh1

I’m actually trying to get a modal designed

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;
  overflow:auto;
  box-shadow:0 0 20px 20px rgba(0,0,0,0.5)
}