Html CSS 和 HTML5:将 <footer> 放在页面底部?没有包装?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7002490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:59:02  来源:igfitidea点击:

CSS & HTML5: Position a <footer> at the bottom of the page? no wrapper?

csshtmlfooter

提问by matt

the age-old problem. I need to position a <footer>Element at the bottom of the page. However i don't have a wrapper div.

古老的问题。我需要<footer>在页面底部放置一个元素。但是我没有包装 div。

I'm do have the following stucture…

我确实有以下结构......

<body>
<header>
<section id="content">
<footer>
</body>

Is there an easy way to push the footer to the bottom if the content is not high enough?

如果内容不够高,是否有一种简单的方法可以将页脚推到底部?

采纳答案by Karl

AFAIK this is still the best way to get a footer to stick to the bottom of the page:

AFAIK 这仍然是让页脚粘在页面底部的最佳方式:

http://www.themaninblue.com/experiment/footerStickAlt/

http://www.themaninblue.com/experiment/footerStickAlt/

回答by Trace DeCoy

Came by this question, and thought I'd post what I've come across. Seems like the ideal way to me.

来到这个问题,并认为我会发布我遇到的问题。对我来说似乎是理想的方式。

CSS:

CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML5:

HTML5:

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

All credit goes to http://mystrd.at/modern-clean-css-sticky-footer/

所有功劳归于http://mystrd.at/modern-clean-css-sticky-footer/

回答by Marc B

Make it position: fixed; bottom: 0, height: xxx? Of course, then it'd overlap any content should the page actually go past the bottom of the window. Perhaps some JS to detect "short" content and set css as appropriate.

做到了position: fixed; bottom: 0, height: xxx吗?当然,如果页面实际上越过窗口底部,它会与任何内容重叠。也许一些 JS 来检测“短”内容并根据需要设置 css。

回答by ayyp

Depending on your code this may not work, but I'd suggest setting your bodyto position:relative;and then setting the footerto position:absolute;and bottom:0. In theory it won't overlap things then.

根据您的代码,这可能不起作用,但我建议您设置bodyposition:relative;,然后设置footerposition:absolute;bottom:0。理论上它不会重叠。

回答by kuyabiye

i had made a jsfiddle before, check out this http://jsfiddle.net/kuyabiye/K5pYe/try resizin the result window, if the content will overflow the scroll will be seen.

我之前做过一个 jsfiddle,看看这个http://jsfiddle.net/kuyabiye/K5pYe/尝试调整结果窗口的大小,如果内容会溢出,就会看到滚动。

回答by Frank Zalkow

Here is a solution that works great for me. Sticky to bottom, no overlap with content, no need for a wrapper.

这是一个对我很有用的解决方案。粘在底部,不与内容重叠,不需要包装器。

https://jsfiddle.net/vq1kcedv/

https://jsfiddle.net/vq1kcedv/

html:

html:

<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
    <nav>Link1 Link2</nav>
    <article>content</article>
    <footer>Copyright</footer>
</body>
</html>

css:

css:

html, body {
    position: absolute;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

body:after {
    line-height: 100px; /* height of footer */
    white-space: pre;
    content: "\A";
}

footer {  
    position: absolute;
    width: 100%;
    height: 100px; /* height of footer */
    bottom: 0px;
    margin-top: -100px; /* height of footer */
}

回答by Paul Lemarchand

I know it's an old post but I wanted to provide my own solution (with javascript) :

我知道这是一篇旧帖子,但我想提供我自己的解决方案(使用 javascript):

/* css */
footer { width:100%; bottom:0; }

/* javascript */
if ($("body").height() < $(window).height()) {
    document.querySelector('footer').style = 'position:absolute;'
}

It should work with any kind of footer of any size.

它应该适用于任何大小的任何类型的页脚。

EDIT : alternative solution ( no need for css) :

编辑:替代解决方案(不需要 css):

/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
    var height = $(document).height() - $("body").height();
    document.querySelector("footer").style.marginTop = height + "px";
}

回答by mdesdev

Check out the Fiddle

看看小提琴

HTML

HTML

<header>

</header>

<section id="content">

</section>

<footer>

</footer>

CSS

CSS

body {
  height: 100%;
}
footer {
  width: 100%;
  height: 200px;
}

jQuery

jQuery

$(function() {

  var footer  = $('footer'),
      footHgt = $('footer').outerHeight(),
      bodyHgt = $('body').height();

  footer
    .css({
      position: 'absolute',
      left: '0',
      top: bodyHgt - footHgt + 'px'
     });

  $(window).resize(function() {

    var footer  = $('footer'),
        footHgt = $('footer').outerHeight(),
        bodyHgt = $('body').height();   

    footer
     .css({
       position: 'absolute',
       left: '0',
       top: bodyHgt - footHgt + 'px'
     }); 

  });

});