CODEWITHSUNDEEP
htmlcssreactjs
Jason Procka
Jason Procka

Reputation: 335

Why doesn't 100vh fill whole page?

I'm currently using React and I'm having issues getting a div to equal 100% of the height of the page. Originally, I had an issue with there always being about 24px of empty space above the body. I couldn't fit it no matter what. I eventually used this on my app.css (a reset)

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

It fixed the issue, but still, a measurement of 100% or 100vh doesn't actually equal 100% of the total view. Here's a screenshot of the page:

https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40

The blue div is a div that fills 100vh. Yet, it doesn't fully fill the page. I tried 100% as well.

Blue div:

.loginWrapper {
  margin-left: 260px;
  height: 100vh;
  background-color: #29B6F6;
}

I noticed that the html had this styling on it, yet even when removed no changes were noticeable:

html {
    box-sizing: border-box;
}

If someone could please explain this phenomenon, I would be very grateful. If you need any extra information, just let me know. Thanks!

Upvotes: 0

Views: 4668

Answers (1)

Shashi
Shashi

Reputation: 474

You will have to reset the basics margin and padding if applied from html and other top level tags.

body, html {margin: 0;padding: 0;}

Or just use something like reset.css

http://meyerweb.com/eric/tools/css/reset/

Upvotes: 3

Related Questions