页脚背景应该扩展到浏览器的底部

时间：2009-12-14 13:05:02

标签： html css

我将页脚修复到浏览器底部有问题。问题是当分辨率更改或窗口大小调整页脚内容与网站内容重叠时，这里是页脚div的当前css 

div.footer {
        position:absolute;
        bottom:0px;
    }

有谁知道如何解决这个问题？谢谢

更新

这正是我所需要的，但由于某些原因它不适用于我的网页，当我将粘贴代码剪切到空白页面时，它确实有效，但由于我的页面内容充满内容和所有内容，所以要包括哪些重要元素？ Here是网址。

上述技巧只有在我的网站填写内容时才有效，如果我有一些内容可以说上面的技巧不起作用。

更新II

我的网站有动态内容，所以我认为不能使用这种CSS粘性页脚，因为有时网站只会有几行内容。这就是为什么页脚没有粘到网页的底部..如果网站上有足够的内容，问题就没有了，就不要粘贴页脚了。

11 个答案:

答案 0 :(得分：13)

你在这里有一个常见的问题，没有共同的答案，但如果我是你，我会尝试，因为上述所有建议显然都不起作用，我会尝试将我的页面容器背景设置为任何颜色都说白色（#FFFFFF），我将身体的背景颜色设置为任何其他颜色，然后白色说灰色（#CCCCCC）。并且最终将页脚位置设置为相对位置，当然如果您希望它始终位于底部，则必须将其放置在所有位置之后。这样，如果您按照分步说明操作，您将获得100％确定的所需。

答案 1 :(得分：8)

结帐CSS Sticky Footer以获得出色的跨浏览器兼容方法。

该网站基本上做的是使页脚粘贴在浏览器边缘BENEATH，并给它一个负边距，其值与页脚高度相同。这样，页脚肯定会粘在底部。

答案 2 :(得分：3)

您可以将 push div 添加到页脚之前的最后一个元素，以便始终确保页脚不与内容重叠。

给出这个例子：

<html>
  <body>
    <div class="header" />
    <div class="content" />
    <div class="footer_push" />
    <div class="footer" />
  </body>
</html>

如果<div class="footer" />总是75px高，请使用以下CSS：

html, body { height: 100%; } /* Take all available vertical space */

/* Push the bottom of the page 75px.
   This will not make scrollbars appear
   if the content fits already. */
.footer_push { height: 75px; }

/* Position the footer */
.footer { position: absolute; bottom: 0; height: 75px; }

答案 3 :(得分：1)

基本上你需要给页脚一个固定的height和推送页脚与另一个相同高度的div到底部。但是，您需要考虑更多特定于浏览器的内容：

  1. html和body除了高度为100％没有（默认）边距外，还必须避免将页脚进一步推到该边距以下。< / LI>
  2. 整个页面中的p和div元素必须包含否 margin-top，以避免将页脚进一步推到低于该页边距的位置。在每个Firefox下。
  3. “容器”div必须使用min-代替height的{​​strong> 100% height来避免页脚重叠剩下的内容。不知道min-height的IE6只能与height一起使用，因此您需要为此添加* html黑客。

    4. 总而言之，这是一个SSCCE，只是复制'n'paste'n'run它：

    <!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
        <title>SO question 1900813</title>
        <style>
            html, body {
                margin: 0;
                height: 100%;
            }
            p, div {
                margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */
            }
            #container {
                position: relative;
                min-height: 100%;
            }
            * html #container {
                height: 100%; /* This is actually "min-height" for IE6 and older. */
            }
            #pushfooter {
                height: 50px; /* Must be the same as footer height. */
            }
            #footer {
                position: absolute;
                bottom: 0;
                height: 50px;
            }      
        </style>
    </head>
    <body>
        <div id="container">
            <p>Some content</p>
            <div id="pushfooter"></div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

    编辑：经过更多测试后，我意识到这确实不在IE8中工作（我仍然认为它是测试版，所以我没有真正使用/测试它，抱歉，除非你通过在<head>添加以下元标记（我已经在这里添加到SSCCE中）让它以IE7兼容性模式（在此插入悲伤的笑脸）呈现以上）：

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

    或让它使用“错误”的doctype以怪癖模式呈现（删除<!doctype>或选择与痛苦的红色Q框相关联的其中一个文档类型在IE here）中。但我不会这样做，这也有更多的负面副作用。

    而且，令人惊讶的是，这里提到的http://www.cssstickyfooter.com网站使用了一种完全不同的方法，但在IE8中也不工作（尝试在y轴上调整浏览器窗口大小） ，与其他浏览器相比，页脚不会沿着它移动，包括IE6 / 7）。那个浏览器让我惊讶不已。真。

答案 4 :(得分：1)

尝试将页脚位置设置为相对位置并使用负上边距进行游戏，以获得所需内容。

答案 5 :(得分：0)

你要找的是粘性页脚，你可以找到很多像这样的资源：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

答案 6 :(得分：0)

取决于你想做什么。我希望它始终显示在屏幕底部，您应该使用

div.footer{
    position: fixed;
    bottom: 0;
}

一定要在身体的底部（或容器上）填充一些衬垫，以便人们可以实际滚动到文本的底部。这里的主要问题是，当调整大小时，它将重叠。

如果您只想要一个具有背景图像/颜色的页脚，一直延伸到最后（对于不是整页高度的页面），您可以尝试使用人造柱原理甚至尝试给出你的身体是你的页脚的背景颜色，并修复标题/内容背景。

今天我偶然发现了这个页面： http://www.xs4all.nl/~peterned/examples/csslayout1.html

可能有帮助

答案 7 :(得分：0)

试试这个：

#wpr{
    display: table;
    height:  100%;
    width:   100%;
}
.dsp-tr{
    display: table-row;
}
.dsp-tc{
    display: table-cell;
}
#ftr-cnr{
    text-align:     center;
    vertical-align: middle;
}
#ftr{
    background-color: red;
    padding:          10px 0px;
    font-size:        24px;
}


<div id="wpr">
  <div class="dsp-tr">
    <div class="dsp-tc">
      body
    </div>
  </div>
  <div class="dsp-tr">
    <div class="dsp-tc" id="ftr-cnr">
      <div id="ftr">
        footer
      </div>
    </div>
  </div>
</div>

display：table不会使它成为一个表，<div>仍然是<div>，它只是告诉浏览器将其显示为表。 我在chrome和firefox中测试过它 让我知道它是否适合你。

答案 8 :(得分：0)

我们有几次这个问题。我们找不到任何跨浏览器CSS的解决方案。我们最终使用了JQuery。我们写了自己的（我不能发表），但这个http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm看起来很有希望：

$(function(){
    positionFooter(); 
    function positionFooter(){
        if($(document.body).height() < $(window).height()){
            $("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
        }   
    }

    $(window)
        .scroll(positionFooter)
        .resize(positionFooter)
});

答案 9 :(得分：0)

您的HTML顶部是否有 DOCTYPE 声明？

如果是这样，我很有可能为你找到解决方案。

我试图做一个高度：100％表格或div（假设这是扩展页脚功能的基本基石）

无论我做了什么，100％的高度都不起作用！元素只是没有伸展......

我将其缩小为非常基本的HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>

但是DIV没有完全伸展（100％被忽略）。对于plain height =“100％”属性的表也是如此。

作为绝望的最后结果猜测，我删除了DOCTYPE行，产生了此代码

<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>

它有效！

我确信有一个很好的解释，但我真的不在意，因为它解决了问题

<强>更新

参见相关question（由我询问）

答案 10 :(得分：0)

我提出了一个相当简单的解决方案，它不会使用任何CSS高度黑客或其中任何一个。

您只需将<body>设置为您希望页脚具有的背景，然后将页脚旁边的所有内容放在<div>中，其中包含您通常会提供给body标签的属性。

当存在大量动态内容时，当动态内容较短时，页脚会将其颜色“扩展”到页面底部，而不会不必要地扩展它。 “虚体”div仍然可以具有渐变后跟纯色，并且页脚的背景隐藏在body标签中，仅显示在短页面上。 （如果您需要在页脚渐变结束后继续使用纯色，或者如果您只需要背景以匹配页脚颜色，则效果很好）

CSS 

body    {background-color: #000; }
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; }
#footer { background: #000; }

HTML 

<body>
  <div id="primary_container">
    <!-- most content, can be short or long -->
  </div>
  <div id="footer">
    <!-- if primary content + footer is less than browser height, body background color
       displays below this. If it is more, you get normal scroll behavior to the end
       of footer and body background color is never seen -->
  </div>
</body>
相关问题
最新问题