How to push a footer to the bottom of page when content is short or missing?

前端未结

关注

 13  1294

I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall e

相关标签:

13条回答

一个人的身影

2020-12-04 17:25

You can do exactly what you want using Flexbox, as an example will be:

html, body {
    height: 100%;
    width: 100%;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.content {
    flex-grow: 1;
}

as a note the footer must be outside the content element

html structure will be something like follow:

<html>
    <body>
        <div class="wrapper">
            <header></header>
            <div class="content">
                <!-- Content -->
            </div>
            <footer></footer>
        </div>
    </body>
</html>

0 讨论(0)

上一页 1 2 3