Sticky footer when Page is larger than screen height
Question
I'm working on a project with a sidebar and in that side bar there i's like to have a sticky foot. The problem is the side bar scales to the height to the main page content. So if the main page content is bigger than the screen height, you end up with a big space under the footer if you scroll down the page.
I'd like the footer to stay at the bottom of the screen.
Hopefully my description makes sense.
.sidebar { height: 100%; } .card{ display: flex; flex-direction: column; min-height: 90vh; } .card-body{ flex: 1; } .footer{ }
<div class="sidebar"> <div class="card"> <div class="card-header">TITLE</div> <div class="card-body"> CONTENT </div> </div> <div class="footer"> FEEDBACK CONTENT </div> </div>
2 answers
solution1
1 2016-10-13 13:47:08
I would recommend flexbox and the vh CSS measurement.
This example will have the footer stuck to the bottom of the viewport , but will also allow the .sidebar to grow larger than the window height if required. So the .footer will be stuck to the bottom with small content in the .card and will move downwards (requiring scrolling to see) if the content in .card gets bigger.
body { margin: 0; padding: 0; } .sidebar { min-height: 100vh; display: flex; flex-direction: column; } .card { flex-grow: 1; }
<html> <body> <div class="sidebar"> <div class="card"> <div class="card-header">TITLE</div> <div class="card-body"> CONTENT </div> </div> <div class="footer"> FEEDBACK CONTENT </div> </div> </body> </html>
If you really want the .footer stuck to the bottom, even with a lot of contents in the .card , then you could try position: fixed . I've added more content in the .card here so that you can more easily see what happens when it is larger than the body (the body & card content scroll, but .footer is always stuck to the bottom of the viewport).
.card { /* .footer is out of the document flow, so make sure to leave enough space for it at the bottom of .card */ margin-bottom: 1.6em; } .footer { /* here's the magic, fixed position at the bottom of the screen */ position: fixed; bottom: 0; /* without a bg-color, this will get messed up with overflowing .card content */ background-color: white; height: 1.6em; }
<html> <body> <div class="sidebar"> <div class="card"> <div class="card-header">TITLE</div> <div class="card-body"> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> CONTENT<br/> </div> </div> <div class="footer"> FEEDBACK CONTENT </div> </div> </body> </html>
solution2
0 2020-09-11 22:37:57
check this example. it works css-tricks
html for this
<div class="content">
<div class="content-inside">
<h1>Sticky Footer with Negative Margin 2</h1>
<p><button id="add">Add Content</button></p>
</div>
</div>
<footer class="footer">
Footer
</footer>
css for this
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.