Html 页脚背景应延伸至浏览器底部

Question

提问by ant

I have a problem with fixing the footer to the bottom of the browser .. The problem is when resolution changes or windows resizes the footer content overlaps the content of the website, here is the current css for footer div

我在将页脚固定到浏览器底部时遇到问题。

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

Does anybody knows how can I fix this? Thank you

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

UPDATE:

更新：

This is what I need exactly but for some reason it doesn't work for my web page, it does work when I cut paste code to the blank page, but since my page is full with content and everything, what are the important elements to include? Hereis the url.

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

The above trick works only if my website has filled content if I have some lets say few lines the above trick doesn't work.

以上技巧仅在我的网站已填充内容时才有效，如果我有一些可以说几行以上技巧不起作用。

UPDATE II

更新二

My website has dynamic content so I think can't use this sort of CSS Sticky footers because sometimes the website will just have few lines sometimes be packed with content. Thats why the footer is not sticking to the bottom of the webpage.. its not problem to stick the footer if there is plenty content on the website the problem is without.

我的网站有动态内容，所以我认为不能使用这种 CSS 粘性页脚，因为有时网站只有几行，有时会塞满内容。这就是为什么页脚不粘在网页底部的原因..如果网站上有很多内容，那么粘住页脚不是问题。

Answer 1

采纳答案by Adnan

What you have here is a common problem for which there is no common answer, but what I would try if I were you since all these above suggestions apparently aren't working, I'd try to set my page container background to any color let say white (#FFFFFF) and I'd set background color of body to any other then white let say grey (#CCCCCC). And finaly set footer position to relative and of course it must be placed after everything if you want it alway to be at the bottom. This way you'll get what you need 100 % sure if you follow step by step instructions.

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

Answer 2

回答by e_known

Checkout CSS Sticky Footerfor an excellent cross-browser compatible method.

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

What that site essentially does is make the footer stick BENEATH the browser edge, and gives it a negative margin that has the same value as the footer's height. This way, the footer is sure to stick to the bottom.

该站点本质上所做的是使页脚贴在浏览器边缘下方，并为其提供与页脚高度相同值的负边距。这样，页脚肯定会粘在底部。

Answer 3

回答by Andrew Moore

You can add a push divto the last element before the footer in order to always assure that the footer doesn't overlap the content.

您可以向页脚之前的最后一个元素添加推送 div，以始终确保页脚不会与内容重叠。

Given this example:

鉴于这个例子：

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

If <div class="footer" />is always 75pxhigh, use the following CSS:

如果<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; }

Answer 4

回答by Davey

Try setting the footers Position to relative and playing around with a negative top margin to get it how you want it.

尝试将页脚位置设置为相对并使用负上边距进行调整以获得您想要的效果。

Answer 5

回答by BalusC

Basically you need to give the footer a fixed heightand to pushthe footer with another div of the same height to the bottom. There's however more browser specific stuff which you need to take into account:

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

The htmland bodymust besides having a height of 100% no(default) margin to avoid the footer being pushed further to below that amount of margin.
The pand divelements throughout the page must have nomargin-topto avoid the footer being pushed further to below that amount of top-margins in under each Firefox.
The "container" divmust use min-heightof 100%instead of heightto avoid the footer to overlap the remaining of the content. IE6 which doesn't know min-heightjust works fine with height, so you'll need to add a * htmlhack for this.

的html和body必须的，除了具有100％的高度无（默认）余量，以避免页脚感到低于余量的量进一步推动。
整个页面中的p和div元素必须没有，margin-top以避免页脚被进一步推到每个 Firefox 下的顶部边距以下。
“容器”div必须使用的，而不是为了避免页脚重叠内容的剩余。IE6 不知道只适用于，因此您需要为此添加一个hack。min-height100%heightmin-heightheight* html

All with all, here's an SSCCE, just copy'n'paste'n'run it:

总之，这是一个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>

Edit: after more testing I realized that this indeed does notwork in IE8 (I still consider it as a beta so I didn't really use/test it, sorry about that), unlessyou let it render in IE7 compatibility modus (insert sad smilie here) by adding the following meta tag to the <head>(which I already added to the SSCCE here above):

编辑：经过测试，我意识到，这确实确实不是在IE8的工作（我仍然认为它是一个测试版，所以我并没有真正使用/测试，比较遗憾的是），除非你让它在IE7兼容作案渲染（插入悲伤的笑脸）通过将以下元标记添加到<head>（我已经添加到上面的 SSCCE 中）：

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

orto let it render in quirks mode by using a "wrong" doctype (either remove the <!doctype>or pick one of the doctypes associated with painfully red Qboxes in IE here). But I wouldn't do that, that has more negative side-effects as well.

或者通过使用“错误的”文档<!doctype>类型让它在怪癖模式下呈现（Q在此处删除或选择与IE 中令人痛苦的红色框相关联的文档类型之一）。但我不会那样做，那样也会带来更多的负面影响。

And, surprisingly, the http://www.cssstickyfooter.comsite as someone else here mentioned here which used an entirely different approach also did notwork in IE8 here (try to resize browser window in y-axis, the footer won't move along it as opposed to other browsers, including IE6/7). That browser keeps astonishing me. Really.

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

Answer 6

回答by BigName

try this:

尝试这个：

#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 does not make it a table, a <div>is still a <div>, it just tells the browser to display it as table. i tested it in chrome and firefox let me know if it works for you.

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

Answer 7

回答by Nir Levy

We had this problem a few times. We could not find any cross browser CSS only solution. We finally resorted to JQuery. We wrote our own (i can't publish) but this one http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htmlooks promising:

我们遇到过几次这个问题。我们找不到任何仅跨浏览器 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)
});

Answer 8

回答by Eran Medan

Do you have a DOCTYPEdeclaration in the top of your HTML?

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

If so, there is a good chance I have a solution for you.

如果是这样，我很有可能为您提供解决方案。

I was trying to do a height:100% table or div (assuming this is a basic cornerstone to the expanding footer feature)

我试图做一个 height:100% table 或 div （假设这是扩展页脚功能的基本基石）

No matter what I did, the 100% height didn't work! the elements just didn't stretch...

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

I narrowed it down to a very basic HTML

我把它缩小到一个非常基本的 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>

but the DIV didn't stretch all the way down (the 100% was ignored). This was true also for tables with plain height="100%" attribute.

但 DIV 并没有一直向下延伸（忽略 100%）。对于具有普通 height="100%" 属性的表格也是如此。

As a desperate last result guess, I removed the DOCTYPE row, resulting in this code

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

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

And it worked!

它奏效了！

I'm sure there is a good explanation, but I really didn't care since it solved the problem

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

Update

更新

See related question(asked by me)

查看相关问题（由我提出）

Answer 9

回答by joshuahedlund

I came up with a fairly simple solution that doesn't use any CSS height hacks or any of that.

我想出了一个相当简单的解决方案，它不使用任何 CSS 高度技巧或任何其他技巧。

You just set your <body>with the background you want the footer to have, and then put everything besides the footer in a <div>with the properties you would normally give to the body tag.

您只需设置您<body>希望页脚具有的背景，然后将页脚以外的所有内容都放在一个<div>带有通常赋予 body 标签的属性中。

This gets the footer to "extend" its color to the bottom of the page when there is short dynamic content without expanding it needlessly when there is a lot of dynamic content. The "virtual body" div can still have a gradient followed by a solid color, and the footer's background is hiding in the body tag, only showing up on short pages. (Works great if you need a solid color to continue after your footer gradient ends, or if you just need the background to match the footer color)

当有短动态内容时，这会使页脚将其颜色“扩展”到页面底部，而不会在有大量动态内容时不必要地扩展它。“虚拟正文”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>

Answer 10

回答by Guillaume Flandre

What you're looking for is a Sticky Footer, you can find a lot of resources like this one: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

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

Html 页脚背景应延伸至浏览器底部

提问by ant

采纳答案by Adnan

回答by e_known

回答by Andrew Moore

回答by Davey

回答by BalusC

回答by BigName

回答by Nir Levy

回答by Eran Medan

回答by joshuahedlund

回答by Guillaume Flandre

相关推荐

最近更新

标签

Html 页脚背景应延伸至浏览器底部

提问by ant

采纳答案by Adnan

回答by e_known

回答by Andrew Moore

回答by Davey

回答by BalusC

回答by BigName

回答by Nir Levy

回答by Eran Medan

回答by joshuahedlund

回答by Guillaume Flandre

相关推荐

Html 如何在网站上显示电子邮件地址以避免垃圾邮件？

html <base> 标签有什么建议？

Html 关闭 textarea 调整大小

使用 HTML 在表格中添加下拉菜单

相关推荐

最近更新

标签