CODEWITHSUNDEEP
cssheightfooterfixed
Johann
Johann

Reputation: 56

Height 100% not working with fixed footer div

css:

body {
    height: 100%;
    background-color: red;
}
.mframe {
    display: block;
    position: relative;
    width: 1024px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 100;
}
.header {
    display: block;
    position: relative;
    float: left;
    width: 1024px;
    height: 125px;
    margin-top: 25px;
    color: #FFF;
    background-color: #666;
}
.navbar {
    display: block;
    position: relative;
    float: left;
    width: 1024px;
    height: 55px;
    margin-top: 70px;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
    color: #000;
    background-color: #171717;
}
.content {
    display: block;
    position: relative;
    float: left;
    width: 1024px;
    height: 100%;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 250px;
    background-color: #333;
    font-size: 20px;
    font-family: "Lusitana", serif;
    color: #FFF;
}
.footer {
    display: block;
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0px;
    left: 0px;
    color: #FFF;
    text-align: center;
    background-color: #111111;
}

html:

<body>
<div class="mframe">
    <div class="header">
        My Header
        <div class="navbar">
            Navbar
        </div>
    </div>
    <div class="content">
        Some Content goes here
    </div>
    <div class="footer">
        My Footer goes here
    </div>
</div>
</body>

I have everything fine and if the content is more than the screen. I can scroll and the footer stays fixed. But if the content is less than the screen. I want my content div to fill up until the footer so I have a background color just on this div all the way down to the footer.

Here is my JSFiddle: http://jsfiddle.net/8BallDzigns/v6fV9/5/

Short Update:

I was thinking my fixed footer is causing a problem. But if I remove my footer from the html and leave just the content div in place. The mframe div is taking the whole page, but the content will not fill up to take up the remaining amount of the mframe div. I don't understand why the height and min-height is not working. I have tried height 100% and min-height 100% and height inherit. But none will work in any combination. I also tried margin-bottom: 0px and padding on the bottom. Still same situation.

Upvotes: 1

Views: 3521

Answers (3)

MilkyTech
MilkyTech

Reputation: 1927

.content {
    margin-bottom: 0;
    padding-bottom: 100%;
}

this is your fiddle with margin-bottom:0;padding-bottom:100%;

Upvotes: 0

Andrew
Andrew

Reputation: 20081

As a solution to your specific problem, of wanting to extend the height of the content div, you could simply change the min-height:100% in .content to min-height: 100vh;

Upvotes: 0

Andrew
Andrew

Reputation: 20081

Had this problem recently, there are examples already out there, but here is what worked for me:

html {
    height:100%;
}

body {
    min-height:100%;
    position:relative; 
}

.mframe {
    min-height:100%;
    margin:0;
    padding:0;
}

.footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:100px;
}

Upvotes: 2

Related Questions