CODEWITHSUNDEEP
htmlcssheightfooter
Boon
Boon

Reputation: 1173

HTML and CSS height property

I'm beginning to get frustrated with CSS. Anytime I think I've grasped one of its many facets, I'm completely thrown off by unexpected behaviour.

I've been trying to make a sticky footer. SO I set the height of my body element to 100% so it takes up the full html element in height ( browser window ). I then wrap everything inside the body in a div except for the footer element, and set this div's height to 100%, thinking that this will take up the full body in height and so push the footer off the bottom of the screen. I could then apply a negative margin yo bring it up and fix it at the bottom.

But the footer sits at the bottom of the page below all the body, without need for a negative margin.. So my idea of setting height to 100% is completely thrown off. What's happened here?

Upvotes: 0

Views: 98

Answers (2)

Zaphod
Zaphod

Reputation: 568

If you want to create a fixed footer, then you don't need to worry about the height property.

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: yellow;
}
<body>
  <p>This is the body</p>

  <div class="footer">
    <p>Footer</p>
  </div>
</body>

Upvotes: 1

Panyi
Panyi

Reputation: 106

HTML

<div class="footer">Content</div>

CSS

body{
margin:0; //you need it for the correct bottom margin
}

.footer
{
    position: fixed;
    bottom:0;
    height:75px; //height of the footer
    color:white;
    background-color: black;
    width:100%;
    margin:0px;

}

Upvotes: 0

Related Questions