Padding bottom of div works fine in Chrome, but not FF or IE8

Hello, everyone,

I’m trying to create a page that has a header and footer that never move, and a content div that scrolls. The content div is transparent, and the header/footer divs have a background-image gradient.

When I apply top, left, and right padding to the content div, that works in Chrome, FF, and IE8. Trying to give the bottom padding seems like FF and IE8 ignore. Chrome does as expected.

CSS:


BODY{padding:0px; margin:0px; border:0px; height:100%; width:100%; overflow:hidden;}

#footer{position:fixed; z-index:-1; border:0px; left:0px; right:18px; bottom:0px; height:50px; overflow:hidden; background-image: url(/img/ftrgrad.png);}

#header{position:fixed; z-index:-1; border:0px; left:0px; right:18px; top:0px; height: 50px; overflow:hidden; background-image: url(/img/hdrgrad.png);}

#content{position:absolute; z-index:1; background-color:transparent; border:0px; right:0px; bottom:0px; left:0px; top:0px; padding: 51px 10px 51px 10px; margin:0px; overflow-x:hidden; overflow-y:scroll;}


<body>
  <div id="footer"></div>
  <div id="header"></div>
  <div id="content"> 1000 lines of blah blah blah </div>

</body>

I’ve been a function programmer since 2000. I know very little about CSS. What am I doing incorrectly?

V/r,

:slight_smile:

Give this a try, Wolfman :shifty: WolfShade. :slight_smile:

It seems to follow the method you were circling. I commented out a lot of unnecessary properties. You can restore them as needed :slight_smile:
Works in IE8, FF and Chrome.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed header + footer, content scrolls</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1215562-Padding-bottom-of-div-works-fine-in-Chrome-but-not-FF-or-IE8
2014.07.11 16:05
WolfShade
-->
    <style type="text/css">

html,body {
    height:100%;
    padding:0;
    margin:0;
}

body {
/*    width:100%;  /* */
/*    border:0;  /* */
/*    overflow:hidden;  /* */
}

#header {
    height:50px;
    position:fixed;
    top:0;
    right:0;
    left:0;
/*    z-index:-1;  /* */
/*    border:0;  /* */
    overflow:hidden;
    background-color:#cfc;  /* TEMP for DEMO */
    background-color:rgba(0,255,0,.25);  /* TEMP for DEMO */
    background-image:url(/img/hdrgrad.png);
}

#content {
    position:absolute;
    top:50px;
    right:0;
    bottom:50px;
    left:0;
/*    z-index:1;  /* */
/*    background-color:transparent;  /* */
/*    border:0;  /* */
/*    overflow-x-:hidden;  /* */
    overflow-y:scroll;
/*    margin:50px 0;  /* if top:0; bottom:0; */
    padding:0 10px;
    background-color:#ccf;  /* TEMP for DEMO */
    background-color:rgba(0,0,255,.25);  /* TEMP for DEMO */
}

#footer {
    height:50px;
    position:fixed;
    right:0;
    bottom:0;
    left:0;
/*    z-index:-1; /* */
/*    border:0;  /* */
    overflow:hidden;
    background-color:#fcc;  /* TEMP for DEMO */
    background-color:rgba(255,0,0,.25);  /* TEMP for DEMO */
    background-image:url(/img/ftrgrad.png);
}
    </style>
</head>
<body>

<div id="footer"></div>
<div id="header"></div>
<div id="content">
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
</div>

</body>
</html>

There are other methods. Paul posted a clever technique a few months ago, which I can’t seem to find at the moment. Then there’s flexbox starting to break over the horizon. Good potential there.

Hi, ronpat,

Thanks for responding.

That’s close to what I’m seeking. I’m trying to set it so that the scrollbar goes the entire height of the browser document window without being cutoff by the header/footer, padding the content area 51px top and bottom so content won’t be hidden by header/footer.

I did it, once, over a year ago. Unfortunately, I no longer have access to that code, and I don’t remember how I did it. :nono:

Hi,

Did you mean something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.header,.footer{
	height:2em;
	background:red;
	position:fixed;
	top:0;
	right:0;
	left:0;	
}
.footer{top:auto;bottom:0}
.content{padding:2em 0}
p + p{margin-top:500px}/* for testing only*/
</style>
</head>

<body>
<div class="header">header</div>
<div class="content"><p>content</p><p>content-last</p></div>
<div class="footer">footer</div>
</body>
</html>

Remember though that when you use fixed elements like this then you cannot have content that wraps or expands the height of the fixed elements because it won’t then match the padding that you set.

Paul O’B, that’s exactly what I was trying to do! Thank you!

I don’t remember exactly what I did a year ago, but my code was neither so clean, nor so few lines.

I’ll be careful of the wrapping/expanding restriction.