我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
然而，另一个非常简单的解决方案是:
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
js小提琴
诀窍是使用display:table表示整个文档，使用display:table-row(高度为0)表示页脚。
由于页脚是唯一显示为表行的子主体，因此它呈现在页面底部。
其他回答
你可以这样做
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
我刚才在这里回答了类似的问题
在页眉固定的页面底部放置页脚
我在网页开发方面是新手，我知道这个问题已经有了答案，但这是我发现的最简单的解决方法，我认为在某种程度上是不同的。我想要一些灵活的东西，因为我的网页应用程序的页脚有一个动态高度，我最终使用了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
一个非常简单的跨浏览器工作的方法是:
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>
这就是我解决同样问题的方法
html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } <div class="demo"> <h1>CSS “Always on the bottom” Footer</h1> <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p> <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p> </div> <div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
使用Flexbox保持页脚在底部
< div风格= "最小高度:100 vh;显示:flex;flex-direction:列; justify-content:之间的空间;" > < div > < !——包装(不带页脚)——> <标题> 我是头。 头> < / 文章< > 我是一篇文章! < / >的文章 < / div > < !——结束:包装器(没有页脚)——> <页脚> 我是一个脚注。 > < /页脚 < / div >
Note
确保你将所有内容包装在<div>或任何其他块级元素中，使用以下CSS样式:显示:flex;flex-direction:列;justify-content:之间的空间;． 确保在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。 确保您使用<footer>或任何其他块级元素来包装页脚。
代码的解释
Min-height: 100vh确保主体元素至少伸展到屏幕的全部高度 Flex-direction:列在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。 对齐-内容:空格将页脚推到屏幕底部。
检查如何做同样的(保持页脚在底部)通过使用引导5 -链接
