Question

我的网站结构如下：

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

Answer 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>

Answer 2

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

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

试试这个

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

并添加

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

FIDDLE

Answer 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/

粘性页脚没有100％的宽度

3 个答案: