how to have to sections that resize based on content and another that uses the remaining space

user_1014978 0
Viewed 65

I'm trying to create a webapp screen where the header is stuck to the top and the footer stuck to the bottom all the time, and the main content is displayed inbetween with a scroll bar if necessary.

I want to make this possible in multiple devices, so the header and footer can change in height to fit the their content in smaller screens and the main content should use the remaining space.

enter image description here

Is is possible to create this behaviour with css? (maybe using flexbox?)

css html
1 Answers

You are right - flexbox is perfect for this:

html,
body {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    background-color: #0800ff;
}

.content {
    background-color: #fff;
    flex-grow: 1;
    overflow-y: auto;
}

footer {
    background-color: #fec11a;
}
<section class="container">
    <header>...</header>
    <div class="content">
        <ol>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        </ol>
    </div>
    <footer>...</footer>
</section>

Notice how I use height: 100vh for the .container and flex-grow: 1 for the .content. That does the trick.

user_44037320
Related