如何使背景填充或齐平到 window 底部的页脚

Question

我的页脚始终位于我网站内容的底部，如果有足够的内容可以将页脚向下推，那就太好了。但是当没有足够的内容将页脚至少推到 window 的底部时，背景看起来很糟糕。这是当内容足够时会发生什么：

这是当没有 足够的内容时会发生什么：

如何使背景拉伸始终到达页脚所在的位置？我不是询问如何制作粘性页脚。我在问如何使内容的背景填充到粘性页脚所在的位置。

这是我的 css:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

/* This makes the bottom footer sticky. */
body {
  /* Margin bottom by footer height */
  margin-bottom: 51px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 51px;
  margin:0;
  padding:0;
}


/* box shadow settings.  Don't pay much attention to this. */

.boxshadow-hack {
  text-align: center; /* This hack makes the child div (which is .boxshadow-around-content) centered.  Because the display is inline-block, it is auto left adjusted normally. */
}
.boxshadow-around-content {
  text-align: left; /* This reverses the text-align:center hack that is used to center this div.  We will make adjustments to this class depending on the screen width using media queries, because a box shadow doesn't look good if it's too crammed. */
  display: inline-block;
  background-image:none;
  background-color: #FCFCFC;
}

.boxshadow-outer {
  text-align: left; /* This reverses the text-align:center hack that is used to center this div.  We will make adjustments to this class depending on the screen width using media queries, because a box shadow doesn't look good if it's too crammed. */
  display: inline-block;
  width:100%;
}

.boxshadow-outer-hack {
  text-align: center; /* This hack makes the child div (which is .boxshadow-around-content) centered.  Because the display is inline-block, it is auto left adjusted normally. */
  width:100%;
  background-image: url("http://i609.photobucket.com/albums/tt178/imanono/cream_dust_zpsqualmncn.png");
}

.boxshadow-hack {
  margin-bottom: 40px;
  margin-top: 40px;
}


.boxshadow-outer {
  padding: 0 15px; /* This changes how far away the box shadow is from the website's content. */
  -webkit-box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
  -moz-box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
  box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
}

.boxshadow-around-content {
  padding: 5 35px; /* This changes how far away the box shadow is from the website's content. */
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
  -moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
  box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
}

这是我的 html:

<body>
    <nav> <!-- top nav stuff here --> </nav>
        <div class="boxshadow-outer-hack">
            <div class="boxshadow-outer">
                <div class="boxshadow-hack">
                    <div class="boxshadow-around-content">
                        <div class="section">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                    <h1 class="text-center">
                                    <b>Title</b>
                                    </h1>
                                    <h2 class="text-center">Second Title</h2>
                                        <!-- Content goes here -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <nav> <!-- footer nav stuff here --> </nav>
<body>

Here is an example when there isn't enough content to fill: -https://heavensgospel.org/about 现在可以了。查看更新以了解我是如何工作的。

Here is an example when there is enough content to fill: https://heavensgospel.org

我打算使用 jsfiddle，但它无法正确解释我的粘性页脚代码。只需将我的代码复制并粘贴到本地 html 文件中即可查看我的情况，或者转到我的 link.

更新 Veiko 的回答是正确的，但非常不受支持。 c01gat3 的答案是正确的并且得到了广泛支持，但是很老套。在我看来，我发现了一种不那么 hacky 的方式（尽管它仍然很 hacky 并且不受欢迎）。它使用 display: table 作为布局，然后对于中间的内容单元格，它使用 height: auto 来填充头部导航栏和粘性页脚之间的空白 space 。不过这不是我自己想出来的哈哈。

<style>
#tablecontainer{
width: 100%;
height: 100%; 
}

.table-panel {
    display: table;
}
.table-panel > div {
    display: table-row;
}
.table-panel > div.fill {
    height: auto;
}




/* Unimportant styles just to make the demo looks better */
#top-cell {
    height: 50px;
    background-color:aqua;
}
#middle-cell {
  /* nothing here yet */
  background-color:purple;
}
#bottom-cell {
    height:50px;
    background-color:red;
}




body {
    height: 100%;
    margin: 0;
}
html {
    height: 100%;
}
</style>

<body>
    <nav> <!-- top nav stuff here --> </nav>
        <div class="boxshadow-outer-hack">
            <div class="boxshadow-outer">
                <div class="boxshadow-hack">
                    <div class="boxshadow-around-content">
                        <div class="section">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                    <h1 class="text-center">
                                    <b>Title</b>
                                    </h1>
                                    <h2 class="text-center">Second Title</h2>
                                        <!-- Content goes here -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <nav> <!-- footer nav stuff here --> </nav>
<body>

这是更新后的方法 fiddle 获取中心内容以填充粘性页脚所在的空白 space。 https://jsfiddle.net/uzfcvzde/

Answer 1

如果您将以下属性添加到 .boxshadow-outer 它将起作用

.boxshadow-outer {
    min-height: calc(100vh - 103px);
}

这会强制容器为视口高度的 100%，然后减去导航栏和页脚的高度 (103px)。

Answer 2

是的，我相信这个背景东西有点棘手。

我有一些线索要告诉你，

设置html，body and boxshadow-outer-hack min-height 100% into height 100%
将您的 boxshadow-outer-hack 设置为 100vh

让我解释一下，你有 html 和最小高度的正文，它一点也不好，因为这个最小高度意味着如果你有动态内容（你可以添加或删除 CRUD内容中的东西）它会随着你的内容的长度而延伸。但是如果你设置高度100%，它表示"oh all of them is counted, including the withe space"。

如果您将内容 div 设置为 100vh，则表示您希望此内容的高度与屏幕设备高度相同。

我想这不是正确的答案，但我只是想给你一个线索。

希望它能帮到你，GBU 儿子。

Answer 3

检查下面的代码，我们为容器提供了 margin-bottom: -100px，这是页脚的高度。

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

.container {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -100px; 
}

.site-footer{
  height: 100px;
  background: orange;
}

<div class="container">
  Hi, content goes here;
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

Answer 4

只是一个快速干净的代码，就像我会做的那样：

* {
  box-sizing: border-box;
}

body {
  background-color: rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

article,
nav,
footer {
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  padding: 1em;
}

article,
menu {
  max-width: 44em;
  width: 80vw;
}

article {
  background-color: white;
  margin: 2em auto;
}

footer {
  background-color: rgba(0, 0, 0, 0.05);
  margin-top: auto;
  text-align: center;
}

menu {
  display: flex;
  margin: 0 auto;
  padding: 0;
}
menu li {
  list-style: none;
}
menu li:nth-child(2) {
  margin-left: auto;
}

<main>
  <nav>
    <menu>
      <li>
        Page Title
      </li>
      <li>
        menuItem#1
      </li>
      <li>
        menuItem#2
      </li>
    </menu>
  </nav>
  <article>
    Page Content
  </article>
</main>
<footer>
  footer
</footer>

阿门！

如何使背景填充或齐平到 window 底部的页脚

How to make background fill or flush to the footer at the bottom of the window

css

background-image

twitter-bootstrap

twitter-bootstrap-3