3

我想将页脚放在页面底部。

例如在没有太多内容的页面上，我仍然需要底部的页脚，但是如果内容长于页面的高度，则必须将页脚向下推。

可以只用 CSS 完成还是我需要添加一些 jQuery 魔法？

在此处输入图像描述

4

6 回答 6

1

您应该使用其中一种粘性页脚技术

于 2012-09-18T19:35:29.677 回答
1

这可以使用 CSS 来完成。

1) 在您的 HTML 中设置页脚

<body>
  ...
  <div id="footer">...</div>
</body>

2）使用CSS定位将其放置在底部。

html {
  padding-bottom:50px;
  position:relative;
}

body {
  position:relative;
  min-height:100%;
}

#footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50px;
}
于 2012-09-18T19:36:30.463 回答
1

所有以前的 CSS 解决方案都要求页脚高度保持不变。对于所有合适的浏览器，以下解决方案解决了动态更改页脚高度的问题。

html { height: 100%; }

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

body > .content { flex-grow:   1; background: ghostwhite; }
body >  footer  { flex-shrink: 1; background: gold; }
<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis luctus mauris nec lacinia. Maecenas egestas, nisl sed volutpat consectetur, urna orci bibendum lorem, sit amet maximus dolor massa et mi. Duis elit neque, interdum nec euismod sed, interdum ac dui. Maecenas non ornare nibh. Vestibulum malesuada et sem quis mattis. Phasellus a justo non dolor porta faucibus sed id lectus. Nullam imperdiet, velit eu convallis ornare, ipsum augue vestibulum lectus, finibus bibendum nulla libero a augue. Aenean eleifend sapien eu placerat facilisis. Vestibulum pulvinar pretium neque, in ullamcorper orci semper nec. Donec rhoncus velit magna, eget dapibus augue cursus quis. Proin in nisi ut tortor finibus tristique vitae vel libero. Aliquam placerat diam nec consectetur tristique. Praesent bibendum diam id velit pellentesque facilisis. In quis odio nec tortor cursus commodo in eu nisl. Nullam non interdum enim, a faucibus metus. Mauris posuere erat id vestibulum eleifend.  </div>
<footer> {{ footer }} </footer>

于 2015-08-13T17:59:31.343 回答
0

像这样在您的页脚上方创建另一个 div 并为其添加 clear ，它将推动您的页脚：

<style type="text/css">
.push{
clear:both;
height:5px;
width:5px;
display:block;
position:relative;
margin:0 auto;
}
</style>

  //HTML CODE
  <div class="push"></div>     
  <div class="fotter">
  </div>
于 2012-09-18T19:48:19.813 回答
0

应用这篇文章中描述的技术：http: //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page。

我发现自己面临同样的情况，我认为这是使用粘性页脚的最全面描述的方法。

于 2012-09-18T19:38:17.537 回答
0

这可以仅使用 CSS 来完成。

这是包含导航、主要和页脚的 HTML 文件的主要部分。

...
<nav class="nav"> ... </nav>
<main class="main"> ... </main>
<footer class="footer"> ... </footer>
...

在您的 CSS 中添加以下行

...
.main {
    ...
    min-height: calc(100vh - <height of your footer>)
}
...

现在，如果 main 中没有内容，则 min-height 将确保使 main 占据整个视口，如果 main 中有任何内容，则 min-height 无关紧要。

于 2020-08-06T15:22:11.510 回答