Search code examples
javascriptcssalignment

How would I align css height to size of browser window?

Ok, so I want to place a video so that it's height is 100% of the browser window, but not the video, so instead of the video height being 1080px (with scrollbars) but the height relative to how tall the browser window is. Here is my current styling (it works):

video {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

I'd like it to look like this:

--Meaning no padding and no scrollbar. I've tried the viewport height css property, but that causes a scrollbar. The code aforementioned does yield the results I am looking for, but it is an extremely inefficient way to do such a simple thing, and I do not know if it will display the same way in other browsers. Here it is live...
Is there a JavaScript alternative? Or better yet pure-css?

Solution

  • Alohci explained that I should use vertical-align: top; to remove the scrollbar, with help from him and other answers from Scott Marcus and Timothy. All received answers were helpful and contributed to the final answer seen here.
    So, my previous css:

    body {
  background-color: #000000;
}

video {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

    And my new css:

    body {
  background-color: #000000;
  margin: 0;
  text-align: center;
}

video {
  vertical-align: middle;
  height: 100vh;
}