My brother and I were messing around in sublime earlier and he suddenly shout out, "I learned something new!"
A little shocked, I asked, "What's that..?"
He replied, "Viewport height! I started in I.E.6 when it wasn't fully supported and never really looked at it again." He then proceeded to show me.
To which I replied, "I accomplished the same thing here." and showed him another sandbox project I messed around with.
In my project, in the CSS, I wrote
(edit: I edited to put the background color in the div, not the html or body, my mistake)
(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/ )
html, body { height: 100%; } div { height: 100%; background: green; }
his code is, (jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/ )
div { height: 100vh; background: green; }
Both did virtually the same thing. After doing some research on here, it appears as if the commonly run in to issue via the former method is the inability to scroll; however, on my sandbox project I had more content in it and was able to scroll and interact with the website normally.
Neither of us were able to determine what the differences were between both methods. Would anyone on here be able to educate us?
Thank you!
Sure! Applying min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.
Try setting the height of the html element to 100% as well. Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
height: 100vh = 100% of the viewport height.
height: 100vh
= 100% of the viewport height
height: 100%
= 100% of the parent's element height
That is why you need to add height: 100%
on html
and body
, as they don't have a size by default
Something you have to know : if you use % for vertical margin or padding, % will be calculated on the width of the parent element, not the height.
Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw);
(for example)
See a nice page here for CSS units : http://css-tricks.com/the-lengths-of-css/
height: 100vh = 100% of the viewport height
Technically, this is true, but a better way to think of it is = 100% of the available height.
If you are looking to fill up a div with the available height, that's a mighty useful trick. Before I learned this, I would have to ensure every div from html down to the nested div had a height of 100% which can be tedious and error prone. Instead, I now just use height:100vh on the nested item.
See this gist.run for an example with Bootstrap 4.1:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With