Question

这是我的页脚代码，如何让它显示在页面底部而不是在我上面的内容下方？

/*footer */
#footer .column {
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

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

注意：这不需要是固定的页脚

Answer 1

确实有两个主要选择：

固定页脚 - 页面底部的页脚始终可见
推送页脚 - 即使内容未填满窗口，页脚也会推送到页面底部

两者中较容易的是固定页脚。

固定页脚

为了固定页脚，在CSS中将页脚的位置设置为固定position:fixed并将页脚放置在页面底部bottom:0px。以下是CSS-Tricks的代码段。

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

推脚？

推脚有点棘手。这里的a great graphic显示了当内容不足时页脚未停留在页面底部的原因：

Pushed Footer Issue Visual

基本上，问题正在发生，因为页脚元素在其上方的元素下被“推”，并且该元素的高度不像页面的高度那么长。为了解决这个问题，您需要确保页脚在页面的整个高度（“减去页脚高度”）下“推”。

以下是如何操作：

<强> HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

<强> CSS

html, body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

以下是更详细的tutorial on how to do it以及上述代码的来源。

这是来自同一来源的working demo of the code。

Answer 2

使用很酷的效果修复了底部的页脚
检查jsfiddle Jsfiddle

中的整页设计

<body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
    <h1>kulbhushan charaya</h1>
</footer>
</body>

和css是

body {
    background: #ffffff none repeat scroll 0 0;
    padding:40px 0;
}
header{
  position:fixed;
  top:0;
  z-index:999;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #ccc;
}
header ul li {
  display: inline-block;
  list-style: outside none none;
  padding: 5px;
}
header ul li a {
    color: #000000;
    text-decoration: none;
}
footer {
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: -1;
}
footer h1 {
  margin: 0;
}
.wrapper {
  background: #ffffff;
  padding: 0 15px;
  z-index: 1;
}

Answer 3

Bootstrap有一个页脚示例，它贴在页面底部： https://getbootstrap.com/examples/sticky-footer/

这是CSS：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

然后在HTML中：

<footer class="footer">

</footer>

Answer 4

我猜您的意思是，您希望页脚保留在页面底部，即使页面上的内容不足以填充视口的高度？

如果是这种情况，您可以使用此技巧：CSS粘性页脚 - http://ryanfait.com/sticky-footer/，http://www.cssstickyfooter.com/或http://css-tricks.com/snippets/css/sticky-footer/

粘性页脚技巧通常依赖于在包装器div上声明最小高度。这意味着您必须重新格式化HTML代码，如下所示：

<div id="wrap">
    <div id="content">
        /* Main body content */
    </div>
</div>

<div id="footer">
    /* Footer content here */
</div>

对于CSS：

html, body, #wrap {
    height: 100%;
}
#wrap {
    height: auto;
    min-height: 100%;
}
#content {
    overflow: hidden;
    padding-bottom: (footer height);
}
#footer { 
    position: relative;
    margin-top: -(footer height); /* Note the negative value */
    height: (footer height);
    clear:both;
}

如果您的页脚可能具有可变高度，则必须使用JavaScript设置#content的底部填充和#footer的上边距。该值取决于#footer元素本身的计算高度。

Answer 5

您可能需要将html元素高度设置为100％，否则您的页面本身将只是您内容的必要高度。我自己也碰到了这个。

Answer 6

#main {padding-bottom: 150px;} /* Should have the same value of footer's height */ 
#footer {position: relative; 
margin-top: -150px; /* footer's height */

Answer 7

我只是在HTML的主min-height上使用container解决了这个问题。

所以HTML：

<body>
    <div class="top-nav">My Nav Bar</div>
    <div class="main-container">
        All my content
    </div>
    <div class="footer">
        My footer
    </div>
</body>

然后是CSS

.top-nav {
    height: 4rem;
}
.main-container {
    min-height: calc(100vh - 4rem - 4rem);
}
.footer {
    height: 4rem;
}

使用SCSS，您可以使用变量来跟踪顶部导航和页脚高度，然后执行类似

的操作

.main-container {
  min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}

这不是一个完美的解决方案，因为它不会将您的页脚完全放在视口的底部，但会在内容时将其推到底部太短，阻止页脚在屏幕中间向上。

Answer 8

如果有人再次坚持这一点，this is a modern solution without hacks

HTML：

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

CSS：

/**
 * Demo Styles
 */

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Answer 9

材料设计引导程序具有出色的类：fixed-bottom。这就是我用的。

Answer 10

在页脚自动将其位置设置在底部后，您需要设置父级的高度。

如果出现此问题后无法在父div或页脚部分添加内容或高度。

Answer 11

只需使用 flex-box：通过将 body 显示设置为 flex，然后将页脚对齐到 flex end。这样，页脚将始终是最后的最后一个组件。

body {
   display: flex;
   flex-direction: column;
}

footer {
  align-self: flex-end;
}

css页脚不显示在页面底部

11 个答案:

固定页脚

推脚？