CODEWITHSUNDEEP
htmlcss
talentless_hack
talentless_hack

Reputation: 25

CSS Issues with Div Height

So here's my code:

#logo {
position:fixed;
color: white;
width: 100%;
padding: 5px;
left:0px;
top:0px;
height:50px;
width:100%;
background:#ffffff;
z-index: 1;
}

#page-container {
margin: auto;
width: 960px;
height: 100%!important;
background: #ffffff;
border-style: solid;
border-color: red;

}

html, body {

padding: 0;
}

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #000000;
background-color: #eef3f7;
}

#footer {
position:fixed!important;
position:absolute;
color: white;
clear: both;
width: 100%;
padding: 0;
left:0px;
bottom:0px;
height:30px;
background:#272695;
text-align:center;
}

I want to be able to set the page container height so that the footer over laps it all the way through. The issue I am getting is this:

ScreenCap

What I want is to have my page-content rule to cover the whole top and bottom with no overlapping. I'm looking for something along the lines of this:

Mock Up

I honestly have tried everything I just don't know what the issue is.

Upvotes: 1

Views: 52

Answers (1)

Andrew-Sepic
Andrew-Sepic

Reputation: 573

Add this to your CSS.

body, html {
   height: 100%;
}

The CSS height property is relative to it's parent and height defaults to auto. So to get your #page-container to be 100% you have to set the parent height.

Upvotes: 2

Related Questions