Css 页脚宽度和位置查询

由于某种原因，我无法让我的页脚粘到页面底部

编辑：我试图把它放在页面的底部，而不是窗口的底部

而且，即使我已经将其设置为宽度：100%它似乎是前一个div的宽度的100%，而不是页面的100%

以下是整个页面的JSFIDLE：

我用于页脚的css代码是：

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

将

页脚的
位置：绝对
设置为
位置：固定

编辑：

应用CSS重置
*{padding:0；margin:0；}
，然后将
页脚的
位置更改为
相对位置
，并从容器中移除
顶部

演示：

您需要设置左值
left:0和固定位置<代码>位置：固定

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


更新
在身体上：

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

位置关系

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

你需要为此采取一些措施，
试试这个：

添加位置：固定意味着页脚现在总是在视图中，我正在尝试将其放置在页面底部，以便只有当它滚动到时才可见。这将使页脚固定在窗口底部，意味着它总是在视图中。我试图将其定位在页面底部，以便只有当您向下滚动到它时，它才可见。
 #footer {height:50px; width:100%; background-color:red; position:relative; bottom:0px;left: 0;clear:both;}

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 */
}