CODEWITHSUNDEEP
htmlcss
Mr Carl
Mr Carl

Reputation: 187

CSS - Height of div = 100%, -20px

Okay, so I've read some other people have had this problem, but they either resorted to JS or the solution just wouldn't work for me.

I have this:

// The Header //
/*            */
/*  CONTENT   */
/*            */
// The footer //

Currently the work in progress can be found at:
http://newsite.carlsimmons.co.uk/

It's working as intended, apart from the always present vertical scroll bar. This is because the content's height is set to 100%, +header & footer height and you're left with something always bigger than the page.

I have tried the absolute option (among plenty of others), but they all have faults or don't work. Just thinking there must be some way to achieve this surely? I guess I shouldn't be too afraid of using JS for this, since it would still look fine for people with JS, but not exactly good practice and might cause some lag on browser resizing.

Upvotes: 2

Views: 11073

Answers (5)

biziclop
biziclop

Reputation: 14616

You could also try using the box-sizing property:

height: 100%
padding: 20px 0;
-moz-box-sizing: padding-box;
     box-sizing: padding-box;

https://developer.mozilla.org/en/CSS/box-sizing

Supported by sane browsers and IE8+ too.

Upvotes: 0

Yoann
Yoann

Reputation: 5097

You can use calc(100% -20px)

http://www.w3.org/TR/css3-values/#calc

But for now its only Firefox compatible http://hacks.mozilla.org/2010/06/css3-calc/

EDIT : IE 9 was the first major browser to implement calc() (cf Andy E's comment)

Upvotes: 6

evan
evan

Reputation: 12553

You haven't explained why absolute positioning hasn't worked for you. Without javascript, having a fixed/absolute position is the only way to go. Here's what I did to get it to work for me.

Basically you have your footer with your footer stuff. Then you have a spacer to prevent the body from being fully hidden behind it.

If you want a fixed header you can do the same thing - real header that's fixed and a header spacer.

Then remove the content height because you don't need it anymore.

HTML:

<div class="footer_spacer">&nbsp;</div>
<div class="footer">
  footer content
</div>

CSS:

.footer
{
  bottom:           0;
  position:         fixed;
  width:            100%;
  z-index:          1000;
}

.footer_spacer
{
  height: 25px; /* you need to make this the same height as the footer */
}

Upvotes: 0

gilly3
gilly3

Reputation: 91657

Give your header and footer absolute position and give your body top and bottom margin equal to the heights of your header and footer respectively:

body {
    margin: 70px 0 110px;
}
body > header {
    position: absolute;
    top: 0;
}
body > footer {
    position: absolute;
    bottom: 0;
}

Upvotes: 0

Yisela
Yisela

Reputation: 6941

You shouln't end up with a bigger page if you use a sticky footer.

One possible solution:

.wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

Another one:

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

Upvotes: 0

Related Questions