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

我想让页脚

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

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


当前回答

使用Bootstrap的一行解决方案

除了提供的所有CSS和jQuery解决方案, 我已经列出了一个使用Bootstrap的解决方案,在body标签上使用一个类声明:d-flex flex-column justify-content-between

这并不需要提前知道页脚的高度。 这并不需要设置绝对位置。 这适用于在较小屏幕上溢出的动态div。

html, body { height: 100%; } <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body class="d-flex flex-column justify-content-between text-white text-center"> <header class="p-5 bg-dark"> <h1>Header</h1> </header> <main class="p-5 bg-primary"> <h1>Main</h1> </main> <footer class="p-5 bg-warning"> <h1>Footer</h1> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>

其他回答

只需要自定义页脚部分

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

我用这个把我的脚贴在底部,它对我有用:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

这是你在HTML中唯一要做的修改,用“allButFooter”类添加div。我对所有的页面都这么做了,那些很短的页面,我知道页脚不会粘在底部,也有足够长的页面,我已经知道我必须滚动。我这样做了,所以我可以看到它在页面内容是动态的情况下工作得很好。

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

“allButFooter”类有一个min-height值,它取决于视口的高度(100vh意味着视口高度的100%)和页脚的高度,我已经知道是40px。

这就是我所做的,而且对我来说非常有效。我并没有在所有浏览器上都试过,只在Firefox、Chrome和Edge上试过,结果和我想要的一样。页脚贴在底部,不需要更改z-index、位置或任何其他属性。文档中每个元素的位置都是默认位置,我没有将其更改为绝对或固定或其他任何位置。

使用响应式设计

有件事我想澄清一下。当我在使用Twitter-Bootstrap进行响应式设计时,这个解决方案,具有相同的40px高的页脚,并没有像我预期的那样工作。我必须修改函数中我要减去的值

.allButFooter {
    min-height: calc(100vh - 95px); 
}

这可能是因为Twitter-Bootstrap有自己的边距和填充,所以这就是为什么我必须调整这个值。

只需将html、正文和除页脚之外的其他行设置为100%。 如

<body>
<header></header>
<content></content>
<footer></footer>
the CSS becomes
html, body, header, content{
height:100%;
}

我做了什么

Html

    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>

CSS

.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }

不需要使用位置固定和绝对。只需以适当的方式编写html即可。

这样做

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

您还可以阅读flex,它被所有现代浏览器所支持

更新:我读过flex并尝试过。这对我很管用。希望你也能这样。以下是我的实现方法。这里main不是ID,而是div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

在这里你可以阅读更多关于flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请记住,旧版本的IE不支持它。