我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm),有一个脚注,我不能坐在页面的底部。

我想让页脚

当页面较短且屏幕未被填充时,坚持在窗口底部 当有超过一个屏幕的内容时,保持在文档末尾,并像往常一样向下移动(而不是重叠内容)。

CSS是继承的,让我困惑。我似乎不能正确地改变它,把一个最小高度的内容或使页脚到底部。


当前回答

一个非常简单的跨浏览器工作的方法是:

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>

其他回答

只需要自定义页脚部分

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>

一个简单的方法是让页面主体100%,最小高度也为100%。如果你的页脚的高度没有改变,这工作得很好。

给页脚一个负的margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

我刚才在这里回答了类似的问题

在页眉固定的页面底部放置页脚

我在网页开发方面是新手,我知道这个问题已经有了答案,但这是我发现的最简单的解决方法,我认为在某种程度上是不同的。我想要一些灵活的东西,因为我的网页应用程序的页脚有一个动态高度,我最终使用了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

你需要使用position: absolute;这很重要,下面是0

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

然而,另一个非常简单的解决方案是:

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)表示页脚。

由于页脚是唯一显示为表行的子主体,因此它呈现在页面底部。