CODEWITHSUNDEEP
htmlcss
Grapho
Grapho

Reputation: 1654

CSS: "height: 100%;" works, but breaks normal flow

Take this simple example... something I never noticed before now.

HTML:

<body>
    <div class="container">
        <div class="sidebar">
        </div>
    </div>
</body>

CSS:

*, *:before, *:after {
    box-sizing: border-box;
}

html, body, div {
    background: rgba(0, 0, 0, .2);
    margin: 0;
    padding: 20px;
    height: 100%;
    border: 1px solid #000;
}

.container {
    height: 250px;
}
.sidebar {
    width: 20%;
}

setting the height of body to 100% seems to work fine in this fiddle.

however, if you change the size of .container so that it expands beyond the initial window size... you will notice the div breaks out of the body container (it even appears to break out of the html container too)?

Reformatted Question

Is it possible to set height of the body to 100% of browser window initially but also allow the parent containers to expand with its children if it expands beyond the initial window size?

Upvotes: 0

Views: 1315

Answers (3)

BoltClock
BoltClock

Reputation: 724502

Typically, when you want to have html and body take on the height of the viewport but also allow them to expand with the content, you set height: 100% on html only, and min-height: 100% instead of height on body. Further explanation can be found in my answers to the following questions:

Unfortunately, because html is the root element, you cannot set min-height on it alone, or everything will fall apart. You need height: 100% because otherwise there is no parent height on which to base body and its contents; the height of html itself is based on the height of the viewport, which as you may have guessed is pre-determined.

This will be problematic if your actual layout has borders on all these elements, so instead I'm going to assume the borders aren't actually needed. You do not need to worry about the background because it will automatically be transferred to the viewport allowing it to cover the entire painting area (details in the second link).

Given your CSS, you can simply set height: auto on body to cancel out the height: 100% in your previous rule, along with min-height: 100%:

html, body, div {
    background: rgba(0, 0, 0, .2);
    margin: 0;
    padding: 20px;
    height: 100%;
}

body {
    height: auto;
    min-height: 100%;
}

Note that I've also removed the borders, again based on my assumption that they're not needed.

Now we have another problem: once the content grows beyond the browser height, the padding on html disappears, since html doesn't expand along with the other content due to height: 100% (scroll to the bottom to see this).

You can't remove height: 100% since it's required, but you can still change the padding on html to margins around body instead because the margins will continue to take effect even once body overflows html, resulting in the following (again, scroll to the bottom):

html, body, div {
    background: rgba(0, 0, 0, .2);
    margin: 0;
    padding: 20px;
    height: 100%;
}

html {
    padding: 0;
}

body {
    height: auto;
    min-height: 100%;
    margin: 20px;
}

Upvotes: 2

user3817050
user3817050

Reputation:

Its your padding. I put your code in Dreamweaver and began to check to see why it was doing that. You're right, it works just fine until it smacks out of the viewport by changing the height. I fixed the issue by removing the padding. I suggest reworking how you organized your padding or try using something fill space without using padding. (Such as margin: 5px; for example on the outer layers instead using padding on the inside of the layers. You can even just using a blank fixed height div, afix your inner divs to a percent, and rinse and repeat. Its a dirty method.)

Upvotes: 0

Christopher Harris
Christopher Harris

Reputation: 112

The default behavior when an element is set to 100% height is to fill its parent entirely, minus the parent's padding value.

Upvotes: 0

Related Questions