Using `CSS: "height: 100%;"` can cause the normal flow to be disrupted

Question

Using `CSS: "height: 100%;"` can cause the normal flow to be disrupted

Consider this straightforward example... something that went unnoticed until 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% works perfectly in this fiddle.

however, if you expand the size of .container so it goes beyond the initial window size... you will see the div escaping the boundaries of the body container (it even seems to break out of the html container too)?

Reformatted Question

Is there a way to initially set the height of body to 100% of browser window but at the same time allow the parent containers to adjust accordingly if their children extend beyond the window size?

html css

Answer 1

Answer №1

Usually, if you want the html and body elements to match the height of the viewport while still being able to expand with the content, you would set height: 100% on the html element only, and use min-height: 100% instead of height on the body element. For more detailed explanations, refer to my responses in these threads:

Height: 100% or min-height: 100% for html and body elements?
Applying a background to <html> and/or <body>

Unfortunately, setting min-height on the root html element alone is not feasible as it will disrupt the layout. You require height: 100% because without it, there is no reference parent height for the body and its contents; the height of html is based on the pre-determined viewport height.

If your design involves borders on all these elements, it's recommended to eliminate them unless essential. The background will automatically extend to cover the whole viewport area (explained in the second link).

To resolve this using CSS, just set height: auto on body to counteract the height: 100% from the previous rule, combined 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 have removed the borders assuming they are unnecessary.

Another issue arises when the content exceeds the browser height, causing the padding on html to disappear, since html does not expand along with the content due to height: 100% (scroll to the bottom to observe).

You cannot remove height: 100% as it is necessary, but you can adjust the padding on html to margins around body, ensuring the margins remain effective even after body overflows html, resulting in this outcome (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;
}

Answer 2

Usually, if you want the html and body elements to match the height of the viewport while still being able to expand with the content, you would set height: 100% on the html element only, and use min-height: 100% instead of height on the body element. For more detailed explanations, refer to my responses in these threads:

Height: 100% or min-height: 100% for html and body elements?
Applying a background to <html> and/or <body>

Unfortunately, setting min-height on the root html element alone is not feasible as it will disrupt the layout. You require height: 100% because without it, there is no reference parent height for the body and its contents; the height of html is based on the pre-determined viewport height.

If your design involves borders on all these elements, it's recommended to eliminate them unless essential. The background will automatically extend to cover the whole viewport area (explained in the second link).

To resolve this using CSS, just set height: auto on body to counteract the height: 100% from the previous rule, combined 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 have removed the borders assuming they are unnecessary.

Another issue arises when the content exceeds the browser height, causing the padding on html to disappear, since html does not expand along with the content due to height: 100% (scroll to the bottom to observe).

You cannot remove height: 100% as it is necessary, but you can adjust the padding on html to margins around body, ensuring the margins remain effective even after body overflows html, resulting in this outcome (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;
}

Answer 3

Answer №2

When an element is designated as having a height of 100%, it will typically expand to occupy the full height of its containing parent, excluding any padding applied to the parent element.

Answer 4

When an element is designated as having a height of 100%, it will typically expand to occupy the full height of its containing parent, excluding any padding applied to the parent element.

Answer 5

Answer №3

After examining your code in Dreamweaver, I discovered that the issue lies with the padding. Everything seems to work fine until it extends beyond the viewport due to changes in height. To fix this problem, I removed the padding. I recommend reconsidering how you arrange your padding or exploring alternatives such as using margin: 5px; on the outer layers instead of padding on the inner layers. Another option is to use a blank fixed-height div and position your inner divs as a percentage, repeating as needed (although this method may be considered unconventional).

Answer 6

After examining your code in Dreamweaver, I discovered that the issue lies with the padding. Everything seems to work fine until it extends beyond the viewport due to changes in height. To fix this problem, I removed the padding. I recommend reconsidering how you arrange your padding or exploring alternatives such as using margin: 5px; on the outer layers instead of padding on the inner layers. Another option is to use a blank fixed-height div and position your inner divs as a percentage, repeating as needed (although this method may be considered unconventional).

Using `CSS: "height: 100%;"` can cause the normal flow to be disrupted

Answer №1

Answer №2

Answer №3

Similar questions

Adding one class at a time, with each new class being added every second

Is the Bootstrap carousel sliding to the top after clicking the next and previous buttons?

Unable to modify the focus outline for .custom-control-input within Bootstrap 4

Reading inputs from a Text Area using ko.JS databinding - Issue with capturing new lines

Choosing the subsequent div after the current one using Jquery

Text that appears as an HTML button is displayed after being compiled using the $

Please display the "django.db.models.query_utils.DeferredAttribute object at" message in Django

Using CSS to access a different div tag within a div tag

Attempting to relocate the product section beneath the category sections within the sidebar of x-cart 5

Refreshing PHP Script

Creating a stunning image fade-in effect with CSS3

Create a captivating sliding effect on Windows 8 using a combination of CSS and JavaScript

Eliminate spaces within a string using JavaScript

What is the best method for storing "game progress" in local storage?

Show both sets of data in two tables on one page

Block Button styles not displaying in IE when set to Full Width

Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Error encountered - registration form

Variable Returned by AJAX

Not all the divs nested within the main div are having the class applied to them