CODEWITHSUNDEEP
heightcss
Cow
Cow

Reputation: 769

CSS - Height: 100% vs min-height: 100%;

So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.

So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.

Anyone have fixes for this?

<div id="wrap">
    <div id="main">
        <div id="content">

        </div>
    </div>
    <div class="clearfooter"></div>
</div>
<div id="footer">

</div>

CSS:

*{
    padding: 0px;
    margin: 0px;
}
html, body {
    height: 100%;
}
body{
    color: #FFF;
    background-image:url('../images/black_denim.png');
}
#wrap {
    min-height: 100%;
    margin-bottom: -200px;
    position: relative;
}
#topBanner{
    width: 200px;
    margin: 0px auto;
}
.clearfooter {
    height: 200px;
    clear: both;
}
/* footer */
#footer { 
    position: relative;
    height: 200px;
    width: 100%;
    min-width: 960px;
}

Upvotes: 4

Views: 984

Answers (1)

gnomical
gnomical

Reputation: 5043

If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.

body{ 
    padding-bottom:200px;
}

#footer { 
    position: fixed;
    bottom:0;
    height: 200px;
    width: 100%;
}

EDIT:

if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.

many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.

Upvotes: 1

Related Questions