粘性页脚没有 100% 的宽度答案

【问题标题】：Sticky footer doesn't have 100% width粘性页脚没有 100% 的宽度
【发布时间】：2015-01-18 05:05:14
【问题描述】：

我有一个结构如下的网站：

<html>
<body>
<div id="page">
    <div id="anyContent"></div>
    <div id="pagecontent">
        <div id="bigContent"></div>
        <div id="footer"></div>
    </div>
</div>
</body>
</html>

bigContent 是动态的，通常会延伸到大尺寸（通过它的宽度和高度来证明）。因为很多元素是动态渲染到 div 中的，bigContent 没有设置为静态宽度。

如何强制页脚与bigContent 具有相同的宽度？请参阅我的示例 jsFiddle。

html {
    margin: 0;
    padding: 0;
    height: 100%;
    min-width: 100%;
}

#page {
    min-height: 100%;
    min-width: 100%;
    position: relative;
}

#bigContent {
    background: black;
    height: 3000px;
    width: 5000px;
}

#footer {
    background: blue;
    clear: left;
    bottom: 0px;   
    width: 100%;
    height: 100px;
}

【问题讨论】：

在你的小提琴中看起来 100% 对我来说 - Chrome 64bit W7
检查我的答案是你追求什么？ @疯子
由于您将内联样式设置为 div#bigContent width=5000px;您可以设置页脚宽度=5000px 将解决问题

标签： html css sticky-footer

【解决方案1】：

您可以将一些属性设置为#pagecontent，然后它将根据您的需要工作：

html {
    margin: 0;
    padding: 0;
    height: 100%;
    min-width: 100%;
}
#pagecontent {
    float: left;
    position: relative;
}
#pagecontainer {
    min-height: 100%;
    min-width: 100%;
    position: relative;
}       
#bigContent {
    background: black;
}
#footer {
    background: blue;
    height: 25px;
    width: 100%;
}

<div id="pagecontainer">
    <div id="anyContent"> </div>
    <div id="pagecontent">
        <div id="bigContent" style="width:500px; height:150px;"></div>
        <div id="footer"></div>
    </div>
</div>

【讨论】：

【解决方案2】：

您已将宽度：5000 像素和高度设置为 3000 像素。

<div id="bigContent" style="width:5000px; height:3000px;"></div>

试试这个

<div id="bigContent"></div>

并添加

#bigContent {
    background: yellow;
    height: 1000px;  
    width: 100%;
}

FIDDLE

【讨论】：

【解决方案3】：

您将width 设置为#bigContent，最好将此宽度设置为#pagecontent。

<div id="pagecontainer">
    <div id="anyContent"></div>
    <div id="pagecontent" style="width:5000px;">
        <div id="bigContent" style="height:3000px;"></div>
        <div id="footer"></div>
    </div>
</div>

http://jsfiddle.net/47hb3fcn/3/

【讨论】：

bigContent 的宽度动态增长。有许多用 Javascript/Jquery 渲染到这个 div 中的 dom 元素。这就是为什么我无法相应地设置 pageContent 的宽度。