堆栈内存溢出
  繁体   English   中英

在页面底部出现粘性页脚问题

[英]Issue with sticky footer at the bottom of the page

 原文  2014-11-06 08:23:36  9   10    javascript/ jquery/ html/ css

问题描述

我正在编写代码编辑器的网页 。

我有一个粘性页脚（意思是坚持页面的底部，无论如何）。

然而，虽然我不知道怎么样，突然之间我必须调整一些东西然后再次取消。

粘性页脚

猜猜看，我无法修复它。 ：S（ 我必须承认CSS从来都不是我的事...... ）

有任何想法吗？

PS这个问题在所有页面/子页面中都很明显，而不仅仅是主页。

更新：

伙计们，非常感谢您的超快回复。 我认为你做对了。 但不是100％ - 也许我没有解释清楚我需要什么。

添加position:fixed 不其固定在底部。 但是，让我们说在主页中，页脚位于内容之上（如顶部导航栏）。 这不是我需要的。 通过“粘性”，我的意思是它必须保持在页面的底部。 如果它是一个短页面，那么它将出现在底部。 如果它是一个长页面，只有在页面的最底部滚动时才会看到它。

10 个解决方案

解决方案1
 2  2014-11-06 08:25:37

将#footer位置更改为fixed似乎工作正常。

http://css-tricks.com/snippets/css/fixed-footer/

UPDATE

更新后：删除body-bottom：45px在body元素上并添加min-height：100％ 

body {
    /* margin-bottom: 45px; */
    position: relative;
    min-height: 100% /* for short pages */
}

然后页脚位置可以保持绝对。

UPDATE 

html {
    height: 100%;
}

解决方案2
 1  2014-11-06 08:26:07

更改 

#footer {
position: absolute;
...

至 

#footer {
position: fixed;
...

解决方案3
 1  2014-11-06 08:26:34

为了制作一些东西，它应该在你的CSS中有一个固定的位置。

您可以在此处找到更多相关信息： http ： //www.w3schools.com/css/css_positioning.asp

确保您的页脚及其周围的所有div也设置为固定。

编辑：

如果您希望您的页脚仅出现在最底部，请将页脚的页边距设置为0px，如下所示： 

#footer {

    margin-bottom: 0px;

}

解决方案4
 1  2014-11-06 08:28:00

尝试这个： 

#footer {
    background: none repeat scroll 0 0 #ddd;
    border-top: 1px solid #aaa;
    bottom: 0;
    color: #666;
    font-family: "Helvetica Neue",Helvetica,arial,freesans,clean;
    font-size: 16px;
    font-weight: bold;
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: fixed;
    width: 100%;
}

刚刚将位置改为固定。

解决方案5
 1  2014-11-06 08:29:37

你需要用底部固定的位置：0 

 #footer {
position: fixed;
bottom:0;
}

解决方案6
 1 已采纳  2014-11-06 09:39:04

我很惊讶没有人能够正确回答你的问题，因为你已经清楚地解释了它。

这就是你只使用css的方法。 假设这是你的html标记： 

<div class="wrapper">
     <p>Your website content here.</p>
</div>

<div class="footer">
     <p>Copyright (c) 2008</p>
</div>

css应如下所示： 

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    /* equal to footer height: */
    margin-bottom: -140px;
 }

.footer {
    height: 140px;
}

链接： http ： //css-tricks.com/snippets/css/sticky-footer/

解决方案7
 1  2014-11-06 09:55:32

实际上，有几种方法可以在页面底部粘贴页脚。 看来你正在使用马修詹姆斯泰勒的方法 ，但你的代码中有错误。

假设给定的标记： 

<body>
    <div class="navbar navbar-inverse navbar-fixed-top"></div>
    <div id="main"></div>
    <div id="footer"></div>
</body>

您可以按照以下步骤解决问题并获得粘性页脚：

  1. <html>的显式height应为100% 。
  2. <body>应该有：
    1. min-height为100% 。
    2. 相对定位。 即position: relative 。
    3. 底部填充作为粘性页脚的高度。
  3. #main应该有一个顶部填充作为固定标题的高度（由您决定）。
  4. #footer应该absolute位于底部 - position: absolute; bottom: 0; position: absolute; bottom: 0; 。

最后，设置box-sizing: border-box; 对所有元素* {...}强制浏览器计算包括边框和填充在内的框的大小。

全力以赴 - 示例 

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html { height: 100%; }

body {
  min-height: 100%;
  margin: 0;
  position: relative;
  padding-bottom: 45px; /* height of the footer */
}

.navbar {
  height: 30px;
  position: fixed;
  top: 0; left: 0; right: 0;
}

#main {
  padding-top: 30px; /* height of the fixed positioned header */
}

#footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45px;
}

解决方案8
 0  2014-11-06 08:28:38

粘性页脚是最简单的东西： DEMO 

footer{
    width:100%;
    height:50px;
    background-color:black;
    position:fixed;
    top:100%;
    left:0;
    margin-top:-50px;
}

解决方案9
 0  2014-11-06 08:42:00

为了更好地理解CSS，您应该了解“位置”值的工作原理。 html网站中所有元素的默认值为： 

position:static;

对于你自己的问题，现在的position:fixed是你的解决方案，但不要只使用它，并通过它学习任何东西。 您可以轻松地尝试位置值，以查看它们在html文档中的工作方式。

例如，首先使用position绝对位置并添加一个固定onscroll位置的动画类将为您提供非常好的滚动效果。

您可以查看这篇非常详细的文章： https ： //developer.mozilla.org/en-US/docs/Web/CSS/position 。 最后，我给你答案： 

   #footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

/ *更新

使用纯CSS无法实现粘性页脚效果。 问题是你需要一个函数来测量窗口的高度，并从顶部给页脚提供正确的边距。
为了实现这一点，你可以使用这个jQuery片段（希望你安装了jQuery）： 

$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});

解决方案10
 0  2014-11-06 08:54:51

你能用javascript吗？ 如果是这样，那么你可以在页面的末尾或超时运行这个javascript：

编辑（我不是强迫使用javascript，还有很棒的CSS答案:) 

 var setPosition = function(){ var foot = document.getElementById('gridContainer2'); foot.style.position = "relative"; if((foot.offsetTop + foot.offsetHeight) >= window.innerHeight){ foot.style.position = "fixed"; } else{ foot.style.position = "relative"; //or whatever you wish } } setTimeout(function(){ setPosition(); window.onresize = function(){setPosition();}; },10);

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 没有页面换行的粘页脚 在滚动“粘性元素”上，需要坚持到“页脚区域”之前而不是页面底部 当我在页面底部触摸下拉按钮时，粘性导航栏会抬起我的页脚 身体高度为100％时将脚注粘到底部 粘性页脚始终位于屏幕底部（而非网页） 滚动后粘性页脚不停留在底部 如果我没有太多内容，如何在页面底部获得页脚，但我不希望粘贴页脚 将页脚停留在页面底部 将页脚放在页面底部 将页脚放在页面底部
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM