Question 42533 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search