将页脚定位在页面底部

Question

将页脚定位在页面底部

jquerycss

3

我希望将页脚放置在页面底部。

例如在内容很少的页面上，我仍然需要把页脚放在底部，但如果有一个超过页面高度的内容，则必须将页脚向下推动。

这是否可以仅使用CSS完成，还是需要添加一些jQuery魔法？ enter image description here

- santa

1

你需要一个粘性页脚 - http://www.cssstickyfooter.com/ - Jawad

这个问题已经被问了一千次。 - j08691

@j08691：而我们将回答更多的一千次。 - Jawad

1

@j08691 确实超过一千个 :) OP 只需要“粘性页脚”这个术语，就知道该搜索什么了。 - Zoltan Toth

那是官方术语吗？;) - santa

@santa：尽可能官方。 - Jawad

6个回答

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>

- kornieff

1

您应该使用其中一种固定页脚技术

- Zoltan Toth

0

在你的页脚上方创建另一个div，并添加clear both属性，它将会推动你的页脚：

<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>

- Dejo Dekic

0

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

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

- Endre Simo

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>)
}
...

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

- Daryl Aranha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- matsko · Accepted Answer

可以使用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;
}