Joe*_*Joe 19 html5 styles coding-style footer css3
当我使用位置相对而没有内容时,页脚上升,绝对有很多内容,页脚下降,并且固定它总是在那里.
是否有一种简单的方法可以独立于内容获取页面末尾,缩小内容并随之增长？
当有很多内容时我们可以在第一页看到页脚,当内容很少时我们会在底部看到.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
header {
position:fixed;
top:0;
width:100%;
height:40px;
background-color:#333;
padding:20px;
}
footer {
background-color: #333;
width: 100%;
bottom: 0;
position: relative;
}
#main{
padding-top:100px;
text-align:center;
}
</style>
</head>
<body>
<header>
header
</header>
<div id="main">
main
</div>
<footer>
footer
</footer>
</body>
</html>
小智 29
页脚更改position: relative;为position:fixed;
footer {
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
以下是使用css3的示例:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
body content....
</div>
<footer class="footer">
footer content....
</footer>
更新
为@Martin指出,'position:relative'在.footer元素上不是必需的,相同的clear:both.这些属性仅作为示例.因此,将页脚粘贴在底部所需的最小css应为:
html, body {
height: 100%;
margin: 0;
}
#wrap {
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
另外,有一篇很好的css-tricks文章显示了不同的方法:https://css-tricks.com/couple-takes-sticky-footer/
我会在HTML 5中使用它...只是说
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
使用 Flexbox 将页脚粘贴在 bootom 上比以往任何时候都更容易，正如我们在下面的代码片段中看到的那样。
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Set minimum height to full viewport height */
}
main {
flex: 1; /* Allow main content to grow and fill available space */
}
footer {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
} <body>
<main>
<!-- Your main content goes here -->
<p>Your content goes here.</p>
</main>
<footer>
<!-- Your footer content goes here -->
<p>© 2023 Your Website Footer</p>
</footer>
</body>