页脚背景应该延伸到浏览器的底部

我有一个问题，修复页脚底部的浏览器..问题是当决议更改或Windows调整页脚内容重叠网站的内容时，这里是当前css for footer div页脚背景应该延伸到浏览器的底部

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

有没有人知道我该如何解决这个问题？谢谢

UPDATE：

这是我需要的究竟，但由于某种原因，它不适合我的网页的工作，它的工作时，我切粘贴代码的空白页，但因为我的页面充满了内容和所有内容，包含哪些重要元素？ Here是网址。

上述技巧只适用于我的网站已经填充内容，如果我有一些可以说几行上述技巧不起作用。

UPDATE II

我的网站具有动态内容，所以我认为不能用这种CSS粘滞页脚因为有时网站将只是还几行有时可以与内容包装。这就是为什么页脚不坚持在网页的底部..如果网站上有很多内容的话，粘贴页脚并不是问题。

来源

2009-12-14 ant

所以你使用/测试与IE浏览器？文档类型是严格的吗？ – BalusC 2009-12-14 13:08:31

是IE7包括以及ff和IE8，问题只发生在IE7 – ant 2009-12-14 13:09:18

哪种doctype您使用？ – 2009-12-31 11:02:04

什么你在这里是一个常见的问题，没有共同的答案，但我会尝试，如果我是你，因为所有这些以上的建议显然不工作，我会尝试将我的页面容器背景设置为任何颜色让我们说白色（#FFFFFF），我会设置背景颜色的任何ot她那么白色让说灰色（#CCCCCC）。并最终确定页脚的位置，当然它必须放在所有东西之后，如果你总想把它放在底部。这样，如果您按照分步说明进行操作，您就可以100％确定所需。

来源

2010-01-05 10:14:28 Adnan

什么是“页面容器背景”，它是如何不同从“身体的背景颜色”（''）？ – joshuahedlund 2012-03-13 15:25:41

唯一的问题是当我有一个在这个机构内的表，有两个很多列显示。（使IE水平滚动）。在这种情况下，当您向右滚动时，您会看到背景更改为#CCCCCC – Jeevan 2013-04-05 20:32:15

（继续上述注释），我通过做一个小jquery来解决问题 - $（document）.ready（function（）{ （$（'body table'）。width（）> 1000） $（'body'）。width（$（'body table'）。width（）+ 300）; }）; ---------基本上将300增加到桌子的宽度，并将其作为身体的宽度 – Jeevan 2013-04-05 21:30:58

是什么，你正在寻找一个粘页脚，你可以找到很多资源，像这样的：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

来源

2009-12-14 13:07:47

真的没有工作m8，还有其他的东西吗？ – ant 2009-12-14 13:21:29

取决于你想要做什么。我希望它在你的屏幕的底部总是可见的，你应该使用

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

一定要得到你的身体（或容器底部的一些填充，使人们实际上可以滚动至底部的文字）。这里的主要问题是，调整一切时会重叠。

如果你只是想有一个页脚的背景图像/颜色一直延伸到最后（对于不是页面高度的页面），你可以尝试使用虚拟列原理，甚至尝试为您的身体提供页脚的背景颜色并修正页眉/内容背景。

今天我碰到这个页面跌跌撞撞： http://www.xs4all.nl/~peterned/examples/csslayout1.html

可能是有益的

来源

2009-12-14 13:29:05 joggink

谢谢你的链接 – ant 2010-01-26 20:46:17

基本上你需要给页脚固定height和推页脚具有相同高度的另一个div来的底部。还有，你需要考虑到然而更多的浏览器具体的东西：

除了具有100％没有（默认）利润率的高度，以避免页脚的html和body必须在被进一步推到低于量的保证金。
整个页面中的p和div元素必须具有否margin-top以避免页脚被进一步推到每个Firefox下的顶部边距以下。
的“容器” div必须使用min-的100%代替heightheight避免页脚以重叠内容的剩余。 IE6不知道min-height只能在height下正常工作，所以你需要为此添加一个* html黑客。

所有的一切，这里是一个SSCCE，只是copy'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（我仍然认为它是一个测试版，所以我没有真正使用/测试它，对此感到抱歉），，除非你让它呈现在IE7兼容性模式（在这里插入伤心笑脸），通过添加以下元标记<head>（我已经在上面添加到SSCCE了）：

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

或让它在怪异模式通过使用“错误的”文档类型呈现（或者删除<!doctype>或挑）与痛苦红色Q盒在IE here相关联的文档类型中的一个。但我不会那样做，那也有更多的负面影响。

而且，奇怪的是，http://www.cssstickyfooter.com网站为别人在这里这里提到它使用了完全不同的方法也并没有在 IE8在这里工作（尝试调整浏览器窗口中y轴，页脚不会一起移动它与其他浏览器（包括IE6/7）相反）。该浏览器让我惊讶。真。

来源

2009-12-14 15:00:00 BalusC

这个工程，但我的页脚仍然不在底部，它是在中间的某个地方..不是真的坚持底部 – ant 2009-12-14 15:39:19

然后，问题是在别的地方，而不是你提供的信息。你是否举例copy'n'paste'n'run上面的代码**不变**？如果仍然失败，请告诉浏览器的详细信息。 – BalusC 2009-12-14 16:05:02

我更新了我的问题 – ant 2009-12-15 10:17:20

结帐CSS Sticky Footer为优秀的跨浏览器兼容的方法。

该网站实质上所做的是让页脚粘在浏览器边缘，并给它一个与页脚高度相同的负边距。这样，页脚肯定会粘在底部。

来源

2009-12-14 18:27:00

看起来很有希望，直到我在最新版本的IE8中测试它。不起作用。出乎我的意料。另请参阅我的答案在这里：http://stackoverflow.com/questions/1900813/footer-background-should-extend-to-bottom-of-browser/1901381#1901381 – BalusC 2009-12-14 19:00:51

您可以将推动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; }

来源

2009-12-14 18:36:12

尝试页脚位置设置为相对和带负上边距来玩弄得到它你想要它。

来源

2009-12-14 21:36:17 Davey

试试这个：

#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>

显示：表不使它成为一个表，<div>仍然是一个<div>，它只是告诉以显示为表中的浏览器。我测试了它在铬和火狐让我知道它是否适合你。

来源

2009-12-27 09:08:03 BigName

我们有这个问题几次。我们无法找到任何跨浏览器的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) 
});

来源

2009-12-31 11:13:11

你有没有在你的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％被忽略）。这对于具有普通高度=“100％”属性的表也是如此。

作为一个绝望的最后结果的猜测，我删除了DOCTYPE行，导致该代码

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

和它的工作！

我敢肯定有一个很好的解释，但我真的不关心，因为它解决了这个问题

更新

参见相关question（由我问）

来源

2010-01-03 18:21:21

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

您只需在背景上设置<body>，然后将其他所有内容都放入<div>中，并将其通常放置在body标签中。

当有很多动态内容时，当动态内容较短而不需要扩展时，页脚会将其颜色“扩展”到页面的底部。 “虚拟身体”div仍然可以有渐变，然后是纯色，并且页脚的背景隐藏在身体标记中，仅显示在短页面上。（如果你需要一个坚实的颜色来继续你的页脚梯度结束后，或者如果你只是需要的背景相匹配的页脚颜色的伟大工程）

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>

来源

2012-03-13 15:43:10 joshuahedlund

页脚背景应该延伸到浏览器的底部

回答

相关问题