Exploring the potential of overflow within a container with a percentage-based

Question

Exploring the potential of overflow within a container with a percentage-based

I am attempting to design a webpage that fills the entire screen height without scroll bars, yet contains a scrollable container within it. Despite trying various approaches with percentage heights, I have not been successful as the percentages do not behave properly when nested.

Below is an example of what I want to achieve. Although I have experimented with multiple variations, none have produced the desired outcome.

HTML

<body>
    <div id="pageheader">
        <h1>Header</h1>
    </div>
    <div id="container">
        <div id="header">
            <h2>Section header</h2>
            <p>Header text</p>
        </div>
        <div id="overflower">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>


<p>The <code>overflower div should be scrollable, while the rest of the page remains static and occupies the full height of the screen.

html css

Answer 1

Answer №1

CSS 2 has long struggled with nested percentage heights, but luckily CSS 3 introduces a powerful tool to tackle this issue once and for all: flexboxes.

The concept is simple: flexboxes enable developers to specify how a section can expand or contract based on the available space, allowing the overflower div to occupy as much space as possible within its parent container, which in turn adapts to fill the screen height all the way up to the body.

HTML

<body>
<div id="pagecontainer">
    <div id="pageheader">
        <h1>Header</h1>
    </div>
    <div id="container">
        <div id="header">
            <h2>Section header</h2>
            <p>Header text</p>
        </div>
        <div id="overflower">
            <p>Lorem ipsum dolor sit amet...</p>
           (more lorem ipsum)
        </div>
    </div>
</div>
</body>

CSS

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#pagecontainer {
    display: flex;
    flex-direction: column;
    background: red;
    height: 100%;
}
#pageheader {
    flex: none;
}
#container {
    display: flex;
    flex-direction: column;
    flex: auto;
    background: green;
}
#header {
    flex: none;
}
#overflower {
    overflow: auto;
    flex: auto;
    background: blue;
}

Unfortunately jsfiddle doesn't handle styles applied directly to body, so testing may require creating a separate HTML file. Remember to include a div id="pagecontainer" to apply the necessary display: flex. If you add more elements between overflow and body, be sure to assign the 3 flex properties to each one!

Answer 2

CSS 2 has long struggled with nested percentage heights, but luckily CSS 3 introduces a powerful tool to tackle this issue once and for all: flexboxes.

The concept is simple: flexboxes enable developers to specify how a section can expand or contract based on the available space, allowing the overflower div to occupy as much space as possible within its parent container, which in turn adapts to fill the screen height all the way up to the body.

HTML

<body>
<div id="pagecontainer">
    <div id="pageheader">
        <h1>Header</h1>
    </div>
    <div id="container">
        <div id="header">
            <h2>Section header</h2>
            <p>Header text</p>
        </div>
        <div id="overflower">
            <p>Lorem ipsum dolor sit amet...</p>
           (more lorem ipsum)
        </div>
    </div>
</div>
</body>

CSS

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#pagecontainer {
    display: flex;
    flex-direction: column;
    background: red;
    height: 100%;
}
#pageheader {
    flex: none;
}
#container {
    display: flex;
    flex-direction: column;
    flex: auto;
    background: green;
}
#header {
    flex: none;
}
#overflower {
    overflow: auto;
    flex: auto;
    background: blue;
}

Unfortunately jsfiddle doesn't handle styles applied directly to body, so testing may require creating a separate HTML file. Remember to include a div id="pagecontainer" to apply the necessary display: flex. If you add more elements between overflow and body, be sure to assign the 3 flex properties to each one!

Exploring the potential of overflow within a container with a percentage-based

Answer №1

Similar questions

Modify the Primevue Class p-accordion-header only under certain conditions

Utilizing JavaScript for parallax horizontal scrolling (identifying optimal 50% of screen)

The CSS properties of a div element include the :before pseudo-element with a "shape" style that does

Conceal a div element only if it is nested within a particular div class

Executing the JavaScript function only a single time is what you're looking

Positioning of CSS elements: Distributing and arranging 4 divs evenly within a single parent div

What is the best way to iterate through two separate "div" elements that contain different data in each?

Troubles with loading images on Node.js, Express, and EJS powered Bootstrap 5 navbar

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Modify font color in collapsed state of bootstrap navbar dropdown

Discover the Magic Trick: Automatically Dismissing Alerts with Twitter Bootstrap

php - Can you identify the issue?

Fixing the error: Severity notice, there is an undefined variable called 'table'

Preventing PHP Form Resubmission and Addressing Unusual Problems

Scrolling through image galleries with automatic thumbnails

Enhance the appearance of your forms with the "Bootstrap

Tips on anchoring a footer to the bottom of a webpage following a loop in PHP

Interactive hexagon shape with dynamic image content on click using a combination of CSS, HTML,

Hiding a parent DIV in JS based on specific content: Here's how

Tips on placing a white background behind fa-3x (Font-awesome) icons