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

我想让页脚

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

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


当前回答

使用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 -链接

其他回答

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

给页脚一个负的margin-top:

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

我认为你可以将主要内容设置为视口高度,所以如果内容超过,主要内容的高度将定义页脚的位置

* { 保证金:0; 填充:0; 宽度:100%; } 身体{ 显示:flex; flex-direction:列; } 标题{ 高度:50 px; 背景:红色; } 主要{ 背景:蓝色; /*这是最重要的部分 身高:100 vh; } 页脚{ 背景:黑色; 高度:50 px; 底部:0; } <标题> < /头> 主要主要< > < / > <页脚> < /页脚>

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
   <header class='header'></header>
   <div class="body-content">
     <!-- all other page content -->
   </div>
   <footer class="footer"></footer>
</body>

</html>

html,
body{
  height:100%;
}
body {
  display:flex,
  flex-direction: column,
}

.body-content {
  flex-grow:1   
}

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

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

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

<body>
    <section class="wrapper">
        <!--Some Content-->
    </div>

    <section class="footer"></section>
</body>

.wrapper {
    min-height: 100vh;
}

.footer {
    top: 100vh;
}