Sticky footer doesn't have 100% width

Question

Sticky footer doesn't have 100% width

506 Views Asked by maniac At 17 April 2025 at 18:55

I have a website with the following structure:

<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 is dynamic and often stretches to large sizes (demonstrated by its width and height). Because a lot of elements are dynamically rendered into the div, bigContent isn't set to a static width.

How can I force the footer to have the same width as bigContent? See my example 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;
}

Original Q&A

There are 3 best solutions below

Harry On 20 November 2014 at 11:04

You have set the width: 5000px and height to 3000px.

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

Try this

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

and add

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

FIDDLE

pavel On 20 November 2014 at 11:07

You set width to #bigContent, better would be to set this width to #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/

**Swapnil Motewar** · Accepted Answer

You can set some properties to #pagecontent then it will work as per your need:

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>

Sticky footer doesn't have 100% width

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in STICKY-FOOTER

Trending Questions

Popular # Hahtags

Popular Questions