How to do overflow of content div without specifying pixel height

Question

I would like to make the content overflow, but not the whole page. My issue is that I can't figure out how to make the content height depend on footer (and potential other elements like header) without hard-code how much horizontal space these take. How do I make the content take up as much horizontal space as available, but nothing more, and then overflow the rest?

My thinking is that I might be able to do it by simply locking the content height and use @media to create a couple of different heights given different resolutions.

Below is a minimal example that I made, where I have the overflow on the whole page. This is not what I want. I would like to have the content to only take up the space that is left after every other element is on the page and then overflow its content (removing overflow on main).

Please advice

In the example.

body {margin: 0; padding: 0;     
}
main, footer {color: #ffffff;}
main {
    background: #000000;
}
.main {
    max-height: 100%;
}
.content {
    background: blue;
    overflow-y: auto;
    height: auto;
}
.footer {
    background: #616161; 
    height: 100px;
    width: 100%;
}
.boxes {  
    background-color: yellow;
    width: 95%;
    height: 250px;
    margin: 5px;
}

    <main>Main
        <div class="main">
            <section class="content">
                <div class="boxes">1</div>
                <div class="boxes">2</div>
                <div class="boxes">3</div>
            </section>
        </div>
        <footer class="footer">Footer</footer>
    </main>

You could look at VH height instead `height: 100vh` = 100% of the viewport height. Technically, this is true, but a better way to think of it is = 100% of the available height. If you are looking to fill up a div with the available height, it's a very useful trick. You could also deduct from 100% - https://www.sitepoint.com/css-viewport-units-quick-start/ — Brian Wiltshire, Sep 26 '20 at 20:55
Thank you for the suggestion. Doesn't look like that solves my problem as I don't know how much percentage height the surrounding elements (incl. the footer or other content) takes. — user1982118, Sep 26 '20 at 21:03
If you apply it to your `
` and `
` seperately (like 80/20) or (90/10) it should work regardless of the footer height no? Did you see the bottom example they have on the page of 50/50. So you just break your sections into percentages basically. — Brian Wiltshire, Sep 26 '20 at 21:14
The problem is that the footer will be a fixed number of pixels, so can't use percentage there as the window size can change. Additionally, I might have elements before the content div that I also want to take into account for how high the content div should be. — user1982118, Sep 26 '20 at 21:17

llui85 · Answer 1 · 2020-10-01T08:50:51.713

Is this the effect you want? (The question was a bit unclear without an image).

I have used flexbox and the flex-grow property to make the .main element expand to all the remaining available height of the page. I have also given the body 100vh height, and then applied overflow: auto to the .main element to make it scroll.

For more information on flexbox, see the excellent explanation at CSS Tricks.

body {
    margin: 0;
    padding: 0;
    height: 100vh;   
}
main, footer {
    color: #ffffff;
}

main {
    background: #000000;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.main {
    flex-grow: 1;
    overflow: auto;
}

.content {
    background: blue;
    overflow-y: auto;
    height: auto;
}
.footer {
    background: #616161; 
    height: 100px;
    width: 100%;
}
.boxes {  
    background-color: yellow;
    width: 95%;
    height: 250px;
    margin: 5px;
}

<main>
        Main
        <div class="main">
            <section class="content">
                <div class="boxes">1</div>
                <div class="boxes">2</div>
                <div class="boxes">3</div>
            </section>
        </div>
        <footer class="footer">Footer</footer>
</main>

Thank you for the reference and for proposing a solution. Will include images next time. Unfortunately, this doesn't work as the footer isn't locked to 100px. The footer changes in height as you expand the window of your solution. — user1982118, Oct 02 '20 at 15:29

score 0 · Accepted Answer · answered Oct 02 '20 at 16:59

I think that I found the solution. The last bit was to do min-height on the footer. No need to specify growth as only the content div is suppose to grow in this example.

body {
    margin: 0;
    padding: 0;## Heading ##
    height: 100vh;   
}
main, footer {
    color: #ffffff;
}

main {
    background: #000000;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.main {
    overflow: auto;
}

.content {
    background: blue;
    overflow-y: auto;
    height: auto;
}
.footer {
    background: #616161;
    min-height: 100px;
    width: 100%;

}
.boxes {  
    background-color: yellow;
    width: 95%;
    height: 250px;
    margin: 5px;
}

<main>
    Main
    <div class="main">
        <section class="content">
            <div class="boxes">1</div>
            <div class="boxes">2</div>
            <div class="boxes">3</div>
        </section>
    </div>
    <footer class="footer">Footer</footer>
</main>

How to do overflow of content div without specifying pixel height

2 Answers2