Size of child elements continually being larger than parent elements?

As I am doing projects, I am continually finding that the child elements are sized larger than the parent elements and I tend to have no idea why the parent elements are sized the way they are.

In a project I am doing, I have:

body {
  height: 100%;
}

But for some reason the size of the body is like half the page size when I use chrome tools.
I have no idea why it would be this seemingly random height. How are these heights and widths chosen??

Hey shamslam845
the unit of measurement in percentage is relative to the parent element, not to the viewport. So a <body> with a height: 100% only means that is going to try to occupy 100% of its parent height.

If the parent element does not have a height set, then its size is going to be determined by the size of its children.

I suppose that you got some text or some images inside that <body>. Well those will come with a default size of course, plus margins and paddings the content of the <body> will have some well defined size. So the body will take up at least the size of its content and so on up the chain.

Does this make any sense? :slight_smile:

1 Like

Sorta. I also have html set to height 100%.
How would I just make the body big enough to fit all the content?

Are you supposed to set it to a fixed height?

Google website web.dev suggests to always set html to 100% width, this (they say) will automatically set your html to your viewport width.

For the height I imagine it is the same, but why fixing the height of a webpage if the common user experience is to scroll down in order to find more content?

If you set your html, then your body should just inherit those properties I think. There are some cases where that does not happen.

In this web page of Codeacademy Forum for example we can see that body is inheriting from html the following props:

color: var(--primary);
    font-family: var(--font-family);
    font-size: var(--base-font-size);
    line-height: var(--line-height-large);
    background-color: var(--secondary);
    overflow-y: scroll;
    direction: ltr;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

The html height is set to 100%, but the body is not inheriting it. The body instead was set to min-height: 100%.

If the parent size is set and if the children occupy less space you’ll be left with empty space, not very nice in my opinion.

If the parent size is set and if the children occupy more space, then the parent will either cut out the extra content or let it show, this depends from the property overflow.

Finally if the parent size is not set whatever space the children occupy the parent will adapt.