在内容很少的页面上强制将页脚置于底部

问题描述 投票：0回答：9

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

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

我不想用

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

又名 粘性页脚

如果没有 jQuery，这可能吗？

有什么建议吗？

css footer sticky
9个回答
53
投票

这个 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
内即可。

38
投票

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 */
}
15
投票

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

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-color
CSS 属性显然仅用于装饰。包含它们是为了在运行代码时可以清楚地看到分隔的部分。）

5
投票

尝试 Steve Hatcher 的粘性页脚解决方案

/*  
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]-->

*/
2
投票

如果您不知道页脚大小，另一种方法是使用 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');
        }
});

您可以通过另一种方法轻松地做到这一点，只需在页脚标签之前的标签上设置最小高度即可。

.the-tag-before-footer{
     min-height:30%;
 }
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 Trick

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 规则。

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')
    选择器。
0
投票

对我来说，直到我删除了

position: absolute

后它才起作用 
.footer {
    // position: absolute; // removed 
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

html, body {height: 100%;}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.