由于某种原因，我不能让我的页脚粘到页面页脚宽度和位置查询

编辑的底部：我想保持在的页面底部，而不是底部的窗口

和即使我已将它设置为宽度：100％它似乎是100％的先前的div的宽度，而不是100％的页面。

这里是整个页面的jsfiddle：http://jsfiddle.net/eehSa/1/

我使用页脚CSS代码是：

#footer {height:50px; width:100%; background-color:red; position:absolute; bottom:0px;}

来源

2014-04-06 user3403768

~~设置 position:absolute到 position:fixed为 footer~~

编辑：

应用CSS重置*{padding:0;margin:0;}然后将footer的position更改为relative，并从容器中删除top。

演示：

http://fiddle.jshell.net/Nw7ej/show/

来源

2014-04-06 18:38:03 smistry

添加位置：固定意味着页脚现在始终处于视图中，我试图将其定位在页面的底部，以便它在滚动时才可见。 – user3403768

您需要设置左值left: 0;和固定位置position:fixed;

#footer #footer {height:50px; width:100%; background-color:red; position:fixed; bottom:0px;left: 0;}

live Demo

enter image description here

UPDATE

#container {height:100%; 
position: relative; 
width: 90%; 
margin: 0 0 20% 5%;/* add some magrin-bottom*/ 
background-color: white; 
top: 80px; 
}

对身体

：

body {background-color:lightgray; padding:0;margin:0;}/* add padding and margin*/

位置relatve

#footer {height:50px; width:100%; background-color:red; position:relative; bottom:0px;left: 0;clear:both;}

Live Demo:

来源

2014-04-06 18:41:12

感谢编辑:) – brobken

这使页脚固定在窗口的底部，这意味着它始终在视图中。我试图将其放置在页面的底部，以便只有向下滚动时才能看到它。 – user3403768

有位置相对http://jsfiddle.net/eehSa/6/一些更新 –

有你需要的是做一些步骤，试试这个：http://jsfiddle.net/eehSa/4/

html,body{      /** Add new style to html,body */ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

body { 
    background-color:lightgray; 
    position: relative;   /** New */ 
    height: auto;    /** New */ 
    min-height: 100%;   /** New */ 
    padding-bottom: 75px;  /** New, equal to footer height + x */ 
} 
#footer { 
    height:50px; 
    width:100%; 
    background-color:red; 
    position:absolute; 
    bottom:0px; 
    left: 0;     /** New */ 
}

来源

2014-04-06 18:53:47

页脚宽度和位置查询

回答

live Demo

UPDATE

Live Demo:

相关问题