我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
只需要自定义页脚部分
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
其他回答
我刚才在这里回答了类似的问题
在页眉固定的页面底部放置页脚
我在网页开发方面是新手，我知道这个问题已经有了答案，但这是我发现的最简单的解决方法，我认为在某种程度上是不同的。我想要一些灵活的东西，因为我的网页应用程序的页脚有一个动态高度，我最终使用了FlexBox和一个间隔。
首先设置html和body的高度
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}
我假设我们的应用程序的列行为，在这种情况下，你需要添加一个标题，英雄或任何垂直对齐的内容。
创建spacer类
.spacer {
flex: 1;
}
之后你的HTML可能是这样的
<html>
<body>
<header> Header </header>
Some content...
<div class='spacer'></div>
<footer> Footer </footer>
</body>
</html>
你可以在这里玩 https://codepen.io/anon/pen/xmGZQL
我实现了使用CSS网格，基本上我定义了3行:
头 内容 页脚
并且使用网格来定义大小，诀窍是在行末对齐页脚，像这样:
CSS
body {
display: grid;
grid-template-rows: auto auto auto;
}
footer {
display: grid;
align-self: end; /* The trick */
}
HTML文件
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header>
Header content
</header>
<h1>main body</h1>
<p>This is a paragraph.</p>
<footer>
<p>Hello there.</p>
</footer>
</body>
</html>
您可以使用更多的行，但请记住将其添加到CSS中，或将所有内容包装在div中。
这篇指南真的帮我找到了答案。
我使用的一个简单的解决方案，从IE8+工作
在html上给min-height:100%，这样如果内容较少，那么页面仍然采用完整的视图高度，页脚贴在页面底部。当内容增加时，页脚随着内容向下移动，并保持贴在底部。
JS小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
我做了什么
Html
<div>
<div class="register">
/* your content*/
</div>
<div class="footer" />
<div/>
CSS
.register {
min-height : calc(100vh - 10rem);
}
.footer {
height: 10rem;
}
不需要使用位置固定和绝对。只需以适当的方式编写html即可。
一个非常简单的跨浏览器工作的方法是:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } <div id="container"> <div id="header">header</div> <div id="body">body</div> <div id="footer">footer</div> </div>
