CODEWITHSUNDEEP
htmlcss
parsecer
parsecer

Reputation: 5106

CSS: height 100% doesn't make child div fit the whole body, but the nested child takes up the whole body

Codepen: https://codepen.io/sabeser/pen/ZEqpyjm

I have this simple layout with a single <div> inside a <body> element:

HTML:

<body>

<div id="app" data-v-app="">
    <div id="content-component">
         <div>a lot of text</div>
    </div>
</div>
</body>

CSS:

        html, body {
            height: 100%;
        }

        body {
            background-color: yellow;
        }

        #app {
            width: 100%;
            height: 100%;
            min-height: 100%;
            background-color: red;

            display: flex;
            flex-direction: column;
        }

        #content-component {
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;

            width: 100%;
            flex: 1 0 auto;

            font-size: 1.2em;


            padding: 2em;

/*
            background-color: blue;
*/
        }

Gives the following output:

enter image description here

The body is yellow, the #app div is red. Despite height: 100% the #app div doesn't take up the whole body.

I also don't understand why the horizontal scrollbar is visible...

If I uncomment the blue background style on the content div, I get this output:

enter image description here

So despite the parent app div (red) not taking up the whole body (yellow), the child content div (blue) takes up the whole body div.

Upvotes: 0

Views: 54

Answers (2)

Keyboard Corporation
Keyboard Corporation

Reputation: 2795

You should move this background-color: red; in your #content-component to fill the div with red color. And remove this width: 100%; in your #content-component as it is unnecessary.

Codepen

Upvotes: 1

Purple_Kitten
Purple_Kitten

Reputation: 223

So despite the parent app div (red) not taking up the whole body (yellow), the child content div (blue) takes up the whole body div.

What you are seeing here, which is especially visible when applying a blue background to the #content-component div, is overflow. The #app div is 100% of the body, which is the size of the view panel. The body only appears extended because it is accommodating the overflow. In the screenshot below, you see that the body ends where the original viewport ended.

size of the body

In this second screenshot, you can see that the #app div ends in the same spot but there is special shading in Chrome Dev Tools to indicate that the content is overflowing.

the content of the app div overflows

I also don't understand why the horizontal scrollbar is visible...

You have 100% width/height applied to divs. That will take the full width of the parent and apply that to the child (which has additional padding). To resolve this issue, you can add box-sizing: border-box to the div with both width: 100%/height: 100% and padding.

#content-component {
  font-size: 1.2em;
  padding: 2em;
  background-color: lightblue;
  box-sizing: border-box;
  width: 100%;
}

To make it even more simple, you can remove the 100% properties if that is an option.

I would reduce the CSS to the following to keep the children contained within the body. In other words, no additional CSS is needed to accomplish this layout!

body {
  background-color: yellow;
}

#app {
  background-color: red;
}

#content-component {
  font-size: 1.2em;
  background-color: blue;
}

Upvotes: 1

Related Questions