文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使背景填充或齐平到窗口底部的页脚

问如何使背景填充或齐平到窗口底部的页脚
EN

Stack Overflow用户
提问于 2016-11-23 12:09:21
回答 4查看 1.8K关注 0票数 1

我的页脚总是在我的网站内容的底部，如果有足够的内容把页脚往下推，那就太好了。但是，当没有足够的内容将页脚至少推到窗口底部时，背景看起来很糟糕。下面是当有足够的内容时会发生的事情：

​

​

下面是当没有足够的内容时会发生的事情：

​

​

如何使背景伸展以始终到达页脚所在位置？我不是在问如何做一个粘性的脚注。我在问如何让内容的背景填充到粘性页脚的位置。

这是我的css：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
<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文件中，即可查看我的情况，或者转到我的链接。

更新Veiko的答案是正确的，但非常不受支持。C01gat3的答案是正确的，得到了广泛的支持，但也有些老生常谈。在我看来，我发现了一种不那么老套的方式(尽管它仍然很老套，也不太受欢迎)。它使用display: table作为布局，然后对于中间的内容单元格，它使用height: auto来填充标题导航栏和粘性页脚之间的空白区域。这可不是我自己想出来的，哈哈。

代码语言：javascript
复制
<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>

下面是获取中心内容以填充粘性页脚所在空白处的更新方法的一部分。https://jsfiddle.net/uzfcvzde/

twitter-bootstrap
css
twitter-bootstrap-3
background-image
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-11-23 13:01:07

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

代码语言：javascript
复制
.boxshadow-outer {
    min-height: calc(100vh - 103px);
}

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

票数 1
EN

Stack Overflow用户

发布于 2016-11-23 20:35:01

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

​

代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<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>

​

阿门!

票数 1
EN

Stack Overflow用户

发布于 2016-11-23 13:10:22

是的，我确实相信这些背景知识，这有点棘手。

我有一些线索给你，

  1. 设置html、body和boxshadow- your hack最小高度100%进入高度100%
  2. 将boxshadow-your hack设置为100vh

让我来解释一下，你有html和body的min-height，这一点都不好，因为这个min-height意味着如果你有一个动态的内容(你可以在内容中添加或删除CRUD的东西)，它会随着你的内容有多长而伸展。但是如果你将高度设置为100%，它会说“哦，所有的都被计算在内，包括宽度空间”。

如果您将内容div设置为100vh，这意味着您希望此内容的高度与屏幕设备的高度相同。

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

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40755889

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档