页脚不会粘在底部

-1

我读过很多文章和现有的问题在计算器上。我已经尝试了10多种不同的代码。它只是不起作用。页脚不会粘在底部

我有一个网站，我希望页脚能够坚持在底部无论如何。我的意思是，平躺在底部。我不希望它随浏览器窗口的高度移动。我希望它保持在所有现有的div下面。

当前页脚位于页面底部。但它随着浏览器窗口的高度而移动。所以，如果我最小化浏览器，页脚会随着浏览器的高度向上移动。我不要那个。

我试了很多，但它不起作用。这是我当前的代码：

body{ 
background-image: url('../images/bg.png'); 
background-repeat: repeat; 
margin: 0px; 
padding: 0px; 
} 

body, html{ 
    height: 100%; 
} 

#body{ 
width: 1024px; 
min-height: 100%; 
margin: 0 auto; 
} 

#footer{ 
clear:both; 
min-height: 150px; 
width: 100%; 
background-image: url('../images/footerbg.png'); 
background-repeat: repeat; 
}

身体标识是包装。页脚是体包装外

<body> 
    <div id="body"> 
     <!-- HEADER --> 
     <div id="logo"></div> 
     <div id="menu"> 
      <ul id="hmenu"> 
      <!-- stuff --> 
      </ul> 
     </div> 

     <div id="page"> 
      <!-- stuff --> 
     </div> 
    </div> 

    <div id="footer"> 
    <!-- stuff --> 
    </div> 

    <div id="navigationbar"></div> 



    </body>

编辑：问题与“身体”的div里面的div的人做。它正在使用绝对位置进行定位。有没有什么办法可以使用Ryan Fait的方法正确粘贴页脚，同时使用绝对位置？

编辑＃2：我忘了使用“clear：both”。解决它

来源

2014-09-23 stefan1294

你将不得不解释为什么这是“不是答案”，因为它似乎准确回答你的问题。 – 2014-09-23 18:07:24

两个接受的答案（给这个问题和上面的链接的答案）是相同的。这怎么可能不是重复的？请详细说明。 – 2014-09-23 21:47:33

@HashemQolami Nevermind。即使在我编辑之后，我也同意你的看法。应该做一些更多的研究。 – stefan1294 2014-09-24 14:23:20

瑞安既成事实有一个解决的办法：http://ryanfait.com/sticky-footer/

我修改了它稍微用SASS：

$footer-height: 250px; /* Set size of sticky footer in the variable: */ 

.main-wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto (-$footer-height); /* the bottom margin is the negative value of the footer's height */ 
} 
.push { 
    clear: both; 
    height: $footer-height; 
} 
.footer-wrapper { 
    clear: both; 
    min-height: $footer-height; 
    background: #E7E7E7; 
    padding: 50px 0; 
}

你可以取出变量香草CSS使用。

你的HTML会是这个样子：

<div class="main-wrapper"> 
    <div class="wrapper"></div> 
    <div class="push"></div> 
</div> 
<div class="footer-wrapper"></div>

来源

2014-09-23 15:45:55

这是我经常使用它的最佳解决方案，但它不是来自Ryan fait ^^。无论如何。 – 2014-09-23 15:49:14

对于Ryan Fait解决方案而言，它非常好。 – Candlejack 2014-09-23 15:49:15

@StevenWave对不起，我只知道它作为瑞安Fait的工作，如果你能提供给我的原作者我很乐意更新引用的代码的来源:-) – 2014-09-23 15:51:34

修复DIV到浏览器，然后迫使其对底部并留下了0余量。

#footer{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    clear:both; 
    min-height: 150px; 
    width: 100%; 
    background-image: url('../images/footerbg.png'); 
    background-repeat: repeat; 
}

如果你想在底部中间的DIV，创建宽度的容器：100％，然后让页脚包含“保证金：0汽车”

来源

2014-09-23 15:46:28 oliversarfas

我认为你应该使用这个CSS对于页脚：

#footer{ 
    position:fixed; 
    bottom:0; 
    background-image: url('../images/footerbg.png'); 
    background-repeat: repeat; 
}

like here。

来源

2014-09-23 15:46:50

所有你需要：

#footer{ 
    position: fixed; 
    bottom: 0; 
    /* rest of your styles */ 
}

此外，如果你不希望内容页脚来隐藏：

#body { /* your main div has an id of body, not to be mistaken for body tag */ 
    padding-bottom: 150px /* height of footer */ 
}

演示http://jsfiddle.net/2mzak87o/

来源

2014-09-23 15:47:25 Arbel

试试这个：

#body { 
width: 1024px; 
min-height: 80%; 
margin: 0 auto; 
position: relative; 
} 

#footer { 
clear: both; 
min-height: 20%; 
width: 100%; 
background-image: url('../images/footerbg.png'); 
background-repeat: repeat; 
}

enter image description here

来源

2014-09-23 15:51:51

页脚不会粘在底部

回答

相关问题