粘性页脚没有 100% 的宽度

我有一个具有以下结构的网站：

<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;
}

您可以将

一些属性设置为 #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>

您已将宽度设置为5000px，高度设置为3000px。

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

试试这个

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

并添加

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

小提琴

您将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/

相关内容

最新更新

热门标签：