35

我有一个只有几行内容的页面。我希望页脚被推到底部。

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

我不想用

#footer
{
    position:fixed;
    bottom:0;
}

又名粘性页脚

没有jQuery这可能吗？

有什么建议么？

4

8 回答 8

40

这个Flexbox解决方案更简洁，更容易实现：

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

只需确保将必要的包装divs在body.

于 2018-06-02T17:52:29.707 回答
36

2021 年更新 - CSS 网格

这是使用 CSS Grid 的解决方案，这是 2021 年迄今为止最好的方法。

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 80px;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}
<body>
    <main>The content</main>
    <footer>Footer</footer>
</body>

旧答案

Ryan Fait的另一个粘性页脚不使用固定位置：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}
于 2013-05-21T20:45:43.463 回答
14

这是一个不需要将页脚放置在主包装元素之外的解决方案，这是大多数人构建页面的方式。

html,
body {
  margin: 0;
  height: 100%;
}

.wrapper {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 1em; /* Height of footer */
  min-height: 100%;
}

header {
  background-color: #cff;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: #000;
}
<div class="wrapper">
  <header>I am the header.</header>
  <article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
  <footer>I am the footer.</footer>
</div>

解释

包装元素将填充 100% 的视口高度。（如果您不想设置 html 和 body 元素的高度，也可以使用 100vh 作为包装器。）包装器还有一个底部填充，用于为页脚创建一个占位符。

页脚绝对位于包装器的底部，并位于包装器底部填充创建的占位符中。

这意味着当页面没有滚动条时，页脚将位于最底部。但是，当有足够的内容让滚动条出现时，页脚将被向下推到内容下方。

（示例中的color和background-colorCSS 属性显然仅用于装饰。它们被包含在内，以便在运行代码时可以清楚地看到分隔的部分。）

于 2017-11-09T19:32:17.360 回答
6

试试 Steve Hatcher 的 Sticky Footer 解决方案

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to the total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/
于 2013-11-29T21:23:37.400 回答
2

我尝试了很多方法，但是当页面是否完全填满时结果会有所不同。最简单有效的解决方案是使用flex。

html, body {height: 100%;}
body {display: flex; flex-direction: column;}
.content {flex: 1 0 auto; padding: 20px;}
.footer {flex-shrink: 0; padding: 20px;}
<div class="content">
  <h1>The GOAT Footer with Flexbox</h1>
  <p>You can add content to test with a full page</p>
</div>
<footer class="footer">
  The GOAT Footer 
</footer>

归功于CSS 技巧

于 2020-08-20T21:28:43.653 回答
1

如果您不知道页脚大小，另一种方法是使用 javascript 和 css

html, body{
    height:100%;
    height:100%;
}

#footer{
    background-color: #292c2f !important;
    position:absolute;bottom:0px;
}

和 Javascript 部分

$(document).ready(function(){
        if ($(document).height() > $(window).height()) {
            $('#footer').css('position', 'relative');
        }
});

您可以通过在页脚标签之前的标签上设置 min-height 轻松地使用另一种方法来做到这一点。

.the-tag-before-footer{
     min-height:30%;
 }
于 2019-07-17T09:58:31.920 回答
0

对于使用 Bootstrap 4 或更高版本的任何人来说，这个问题都很容易解决，只需在您的网站上包含以下代码段：

<script>
     $(document).ready(function(){
         if ($('body').height() < $(window).height()) {
            $('footer').addClass('position-absolute bottom-0');
         } else {
            $('footer').addClass('position-static');
         }
     });
</script>

在这里，我们检查 BODY 标签的高度是否小于浏览器窗口的高度，如果为正，我们将页脚放置在页面底部，如果为负，我们将页脚设置为静态，它将保持在原处。你不需要改变你当前的代码，你只需要在你的页面或包中包含这个javascript，记住<body>标签必须有位置：相对，如果你没有在CSS中改变标签的“位置”属性<body>，你不需要做任何事情，因为它是默认值。

  • 确保在 jquery 之后包含代码，没有 jquery 它将无法工作。
  • 如果您不使用<footer>标签，则应根据需要更改$('footer')选择器。
于 2021-12-09T12:34:17.343 回答
0

首先将你所有的主要内容包装在一个 div 元素中，并给它一个“包装器”类（或者任何你想要的名字）。

HTML：

<body>
    <div class="wrapper">
        <h1>Main Content</h1>
    </div>
    <footer>
        <p>Footer Content</p>
    </footer>
</body>

现在，确保你给你的页脚一个高度。

然后使用 calc() 函数将包装器的高度设置为等于视口（显示）的高度减去页脚的高度。

.wrapper {
    min-height: calc(100vh - 50px);
}
footer {
    height: 50px;
}

现在，如果您的包装内容有额外的边距，您将不得不增加从视口高度减去的像素数量以反映这一点。除此之外，这是一个超级简单和快速的修复。不需要 javascript，只有两个 CSS 规则。

于 2021-11-13T21:08:10.180 回答