html - How to keep my footer on the bottom of every page regardless if the page has content or not?

Question

Welcome To Ask or Share your Answers For Others

html - How to keep my footer on the bottom of every page regardless if the page has content or not?

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

html - How to keep my footer on the bottom of every page regardless if the page has content or not?

Im using the default Web Application MVC project and if i dont have much content on the page the footer is going up. How can i make the footer to stay always on bottom of the page?

my html structure is this

<body>
  <div class="body-content"><div>
  <footer></footer>
</body>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:26:30+0000

<!doctype html>
<html>
<head>
<title>Sticky footer</title>
<meta charset="UTF-8"/>
<style>
html, body {
height: 100%;
background: #e4e4e4;
margin: 0px;
padding: 0px;
}
.wrapper {
min-height: 100%;
width: 100%;
}
.main {
clear: both;
overflow: auto;
padding-bottom: 100px;
}
footer {
margin-top: -100px;
background-color: #1b1e25;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
}

</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<p>Some content</p>
</div>
</div>

<footer>
<p>footer</p>
</footer>
</body>
</html>

Original source: http://www.cssstickyfooter.com/

Categories

html - How to keep my footer on the bottom of every page regardless if the page has content or not?

html - How to keep my footer on the bottom of every page regardless if the page has content or not?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags