logo标签列表

CSS - 固定页脚

htmlcssfootersticky
5

看起来有很多关于这个问题的解决方案，但似乎都对我没用...

我创建了这个小的jsfiddle以展示给你： jsfiddle footer

还有CSS：

.footer {
     width:798px;
     border-top: 2px solid #2E181A;
     clear: both;
     padding: 5px 0 0 0;
     background-color: inherit;
     text-align: center;
     bottom:0;
     background-color: #E6D9BD;
     position:relative;
     height: 30px;
     margin: -30px auto 2px auto;
     z-index:30;
 }

 .container {
     width: 788px;
     margin: 0px auto 0px auto;
     padding: 0px 0px 30px 0px;
     border:5px solid #2E181A;
     background-color: #E6D9BD;
     min-height: 100%;
     position:relative;
     content: " "; /* 1 */
     display: table; /* 2 */
 }

 .contentleft {
     background-color: inherit;
     margin:5px 10px 10px 10px;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 300px;
     display:block;
 }

 .contentright {
     background-color: inherit;
     margin:5px 0px 10px 10px;
     border:0px solid #2E181A;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 420px;
     display:block;
 }

我在
中设置了一个顶部边框，应该是可见的，并且在边框和
之间留有一点空间。
希望您快速查看代码并查找我做错了什么！
1
一个粘性页脚，按定义来说，不应该在用户滚动页面时保持在页面上吗？如果这是真的，那么为什么你把.footer的position设为相对定位而不是固定定位呢？ - djthoms
2
嗯...我可能误解了“sticky”的定义。我的意思是一个页脚，无论内容有多长，都会保持在底部。我的页脚确实这样做了，但不是我想要的... - Simon Jensen
只需遵循 http://www.cssstickyfooter.com/。 - Etheryte
@Nit，谢谢你提供的链接，但是我很久以前就是按照这个教程做的，但不知怎么搞错了我的CSS，现在完全失去了整体思路... - Simon Jensen
@SimonJensen 你想让它看起来像什么？ - Zach Saucier
6个回答
4
现代干净的CSS“粘性页脚”来自James Dean HTML 
<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

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%;
}

Demo here

3

我不确定这是否是你想要的？http://jsfiddle.net/2jn3J/19/

我添加了一个高度为50px的容器作为底部div，并固定在底部。现在，底部div绝对定位在底部，其中一个高度为30px的div，留下20px的间隙。

.footer-container {
    background-color:white;
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:30;
    clear: both;
}

.footer {
    border-top: 2px solid #2E181A;
    background-color: inherit;
    text-align: center;
    background-color: #E6D9BD;
    height:30px;
    position:absolute;
    bottom:0;
    width:100%;
}

.container
{
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    background-color: #E6D9BD;
    height:2000px;
    position:relative;
        content: " "; /* 1 */
    display: table; /* 2 */
}
.contentleft
{

    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 300px;
        display:block;
}
.contentright
{

    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}
1
一个粘性页脚是指页脚“粘”在屏幕底部。 - Jordan
1
“粘性页脚”的意思是保持在底部，除非内容超过视口高度。” 猜测定义可能有所不同。 - Marcel
啊，是的，对不起，伙计，让你感到困惑了。 - Jordan
@user3266433！你做得很好！那个小减号是问题所在！现在看起来它可以工作了 :) 非常感谢！！ - Simon Jensen
1
黏性页脚最常见的使用方式似乎是当内容较少时，页脚会粘在页面底部，并在其他情况下作为普通的底部页脚。 - Etheryte
显示剩余2条评论
2
使用Flexbox，生活会变得更加轻松。 

.FlexContainer {
  display: flex;
  flex-direction: column;
}

.Main-Content {
  flex: 1; 
  // This ensures, all extra space is stretched by this class. Remaining will stretch to own height
}

/* Only to distinguish. No need to give body height  */

header {
background-color: red;
}
main {
background-color: green;
}
footer {
background-color: blue;
}

body {
height: 300px;
}
<body class="FlexContainer">
  <header>HEADER</header>
  <main class="Main-Content">
    This is main section
  </main>
  <footer>FOOOOTERRR</footer>
</body>

1

你已经接近理解如何让http://www.cssstickyfooter.com/html-code.html的概念工作了，它只需要添加html, body { height: 100%; }就可以变成“粘性”的。

http://jsfiddle.net/2jn3J/22/

如果您想完全正确地执行并获得内容和页脚之间的空间，您需要添加另一个具有 min-height: 100%; 的 div 并从 .container 中删除 min-height: 100%;。

http://jsfiddle.net/2jn3J/28/

CSS：
html, body { height: 100%; }
.wrap { min-height: 100%; }
.footer {
    width:798px;
    border-top: 2px solid #2E181A;
    clear: both;
    padding: 5px 0 0 0;
    background-color: inherit;
    text-align: center;
    bottom:0;
    background-color: #E6D9BD;
    position:relative;
    height: 30px;
    margin: -37px auto 0 auto;
    z-index:30;
}

.container {
    width: 788px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    border:5px solid #2E181A;
    background-color: #E6D9BD;
    position:relative;
    content: " "; /* 1 */
    display: table; /* 2 */
    overflow: auto;
}

.contentleft {
    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: auto;
    width: 300px;
    display:block;
}
.contentright {
    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}

HTML：

<div class="wrap">
<div class="container">

<div class="contentleft">Content in the left</div>
<div class="contentright">Content in the right</div>

</div>
</div>

<div class="footer">Sticky footer</div>
谢谢你的回答，@Marcel。但是那并没有解决问题。我相信将min-height:100%放在wrapper或container中没有区别，但是将"margin: -30px auto 2px auto;"改为"margin: 30px auto 2px auto;"就可以了！:) 非常感谢你的回答，但这个负号是错误的。 - Simon Jensen
0

这是使用CSS进行表格模拟。标题和页脚高度为100像素，容器div占据屏幕之间的所有空间。

CSS：

#frame{
   display: table;
   height: 100%
   width: 100%;
}

#header{
   display: table-row;
   height: 100px;
   background-color: red;
}

#container{
   display: table-row;
}

#footer{
   display: table-row;
   height: 100px;
   background-color: black;
}

HTML：

<div id="frame">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

JSFiddle（我在body中添加了一些额外的样式，因为fiddle在iframe中，但在普通浏览器行为中，您不需要它）。

0

我刚写了一篇关于这个的文章。你可以在Medium上找到它。

有很多CSS有效的解决方案，但我建议使用Javascript来实现这个结果。

这背后的主要思想是你想知道页脚上面的高度以及你需要调整页脚顶部的高度以将其移动到底部的高度。这里有一个Gist正好做到了这一点。

这里是代码（假设您的页脚是具有id #footer的元素）：

window.addEventListener("load", activateStickyFooter);

function activateStickyFooter() {
  adjustFooterCssTopToSticky(); 
  window.addEventListener("resize", adjustFooterCssTopToSticky);
}

function adjustFooterCssTopToSticky() {
  const footer = document.querySelector("#footer");
  const bounding_box = footer.getBoundingClientRect();
  const footer_height = bounding_box.height;
  const window_height = window.innerHeight;
  const above_footer_height = bounding_box.top - getCssTopAttribute(footer);
  if (above_footer_height + footer_height <= window_height) {
    const new_footer_top = window_height - (above_footer_height + footer_height);
    footer.style.top = new_footer_top + "px";
  } else if (above_footer_height + footer_height > window_height) {
    footer.style.top = null;
  }
}

function getCssTopAttribute(htmlElement) {
  const top_string = htmlElement.style.top;
  if (top_string === null || top_string.length === 0) {
    return 0;
  }
  const extracted_top_pixels = top_string.substring(0, top_string.length - 2);
  return parseFloat(extracted_top_pixels);
}

如果您想要更详细的答案，请前往Medium文章。我还为此编写了一个JS Fiddle。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接