expand body height css

174

July 19, 2018, at 11:40 AM

I'm attempting to expand my body tag to full browser height to fully display background color. I understand there are some solutions that suggest using html tag height of 100% and body tag with height of 100% or min-height of 100%.

I have found a solution (below) that has achieved the same result by specifying a min-height of the full view port and this works on different browsers. Could I use this as an alternative solution? If any, what are the disadvantages of this solution? Please provide some supporting evidence.

body {
background-color:#ea7400;
height: 100%;
min-height: 100vh;
}

Answer 1

@Josethehose provided a comment directing me to useful information on my question. See min-height in vh vs % for body?

While my solution did work, I don't believe it is the optimal solution because it uses unnecessary code.

Explanation: The html, and body tags don't have default heights and can be sized relative to their parent elements. The hierarchy is Viewport > HTML > Body. The actual size of the browser screen is Viewport, so specifying the height: 100% for the html tag will ensure it is the full height of its parent element or the Viewport. The height: 100% can be coupled with the body tag to achieve full height of the parent element or the html tag which is inherited from the Viewport.

The optimal solution would be: