Footer at the bottom of site

I have a HTML…

    <div class="wrapper">
        <div class="header">

        </div>
        <div class="center">

        </div>
        <div class="footer">

        </div>
    </div>

and CSS…

div.wrapper {
    position: relative; width: 100%; height: 100%;
}

div.header{
    background-color: black; height: 70px;
}

div.center {
    padding: 20px 100px 0 100px; /*height: 580px;*/
}

div.footer {
    background-color: black; height: 50px;
}

I would to get footer at the bottom of the screen independently of screen height. How it’s possible?

Hi there igor_g,

here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Flex full page</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 } 

html, body {
    height: 100%;
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
}

body {
    display: flex;
    flex-direction: column;
}

body > header,
body > footer {
    flex: 0 0 auto;
    padding: 1em;
    background-color: #ace;
}

header {
    border-bottom: 1px solid #999;
}

footer {
    border-top: 1px solid #999;
}
main {
    flex: 1 0 auto;
    padding: 1em;
    background-color: #def;
}
</style>

</head>
<body>

 <header>
     <h1>Site Title</h1>
 </header>
    
 <main>
     <p>Lorem ipsum</p>
 </main>
    
 <footer>
     <p>footer</p>
 </footer>

</body>
</html>

coothead

1 Like

Sorry, but by me it doesn’t works. I have MS Edge Version 89.0.774.76.

Try this CSS:

body{
	margin:0;
}
div.wrapper {
    position: relative; width: 100%; height: 100%;
}

div.header{
    background-color: black; height: 70px;
}

div.center {
    padding: 20px 100px 0 100px;
}

div.footer {
    background-color:black; position:fixed; bottom:0; width:100%; height:50px;
}
1 Like

It works. Thanks!

Just to clarify the footer that @Archibald posted is a fixed positioned footer that sits at the bottom of the viewport no matter what.

The footer that @coothead posted is a sticky footer where the footer sits at the bottom of the viewport until content pushes it below the fold.

Note that for the position:fixed footer you will need to ensure that any normal content that goes below the fold will need to have padding bottom equal to the height of the footer or you won’t see all of it.

Lastly the height:100% in you wrapper rule will do nothing as you need to have html and body at height:100% also as percentage heights need an unbroken chain of fixed heights back to root.

However, although that will make the wrapper’s height work it will also limit it to 100% only and it will not grow below the fold. Therefore you would need to use a min-height on your wrapper instead of a fixed height.

You can use min-height:100vh for a minimum viewport height without needing an unbroken chain back to root but there are some small issues with it in iOS.

The 100% height is irrelevant in the version by @Archibald anyway.

Perhaps, you overlooked this…

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

…in my post.

I have a suspicion that browsers in Windows 10
may not render internal CSS.

Perhaps users of that OS can confirm or deny it.

Anyway here is the example on codepen…

https://codepen.io/coothead/full/YzNjWxQ

coothead

I just ran your code as is, with the internal CSS on my Win10 machine. Edge, Firefox, Opera, Chrome… all look perfect with the sticky footer.

1 Like

Hi there tracknut,

thanks for testing. :winky:

I wonder why @igor_g said it did not work for them. :eek:

coothead

I guess @igor_g was looking for a fixed positioned footer not a sticky footer. Your code works as expected and is similar to the code I’ve been using for years :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.