我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
对我有用。
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#{容器 身高:100 vh; 保证金:0; 显示:flex; flex-direction:列; ｝ #页脚{ margin-top:汽车; ｝ < div id = "容器" > < div id = "头" >头< / div > 身体< div id = "身体" > < / div > < div id = "脚注" >页脚< / div > < / div >
其他回答
一个简单的方法是让页面主体100%，最小高度也为100%。如果你的页脚的高度没有改变，这工作得很好。
给页脚一个负的margin-top:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
这就是所谓的粘性页脚。在谷歌上搜索它会出现很多结果。我成功地使用过CSS Sticky Footer。但还有更多。
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4em; } <html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div> </body> </html>
此代码的源代码
我在我的许多项目中都使用过，从来没有遇到过任何问题:)
供您参考，代码片段
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */ background:green; } .footer, .push { height: 50px; /* .push must be the same height as .footer */ } .footer{ background:gold; } <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="wrapper"> Content Area </div> <div class="push"> </div> <div class="footer"> Footer Area </div> </body> </html>
你可以这样做
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
我做了什么
Html
<div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>
CSS
.register {
min-height : calc(100vh - 10rem);
}
.footer {
height: 10rem;
}
不需要使用位置固定和绝对。只需以适当的方式编写html即可。
