Fixed height div!

donboe · December 30, 2012, 9:31am

I just received a psd for a 100% height layout with a sticky footer, which you can see here! They wish to have a fixed height content div in the example left. The content div should have margins of 30px around top, bottom and left). I tried Paul O’bs method with a fixed div holding the background but I can’t get the margin at the bottom to work. This is what I have:


<!-- #wrapper -->
<div id="wrapper">
  <div id="header"></div>
  <div id="content">
  
  </div>
  <div class="col"></div>
</div><!-- #wrapper -->

<!-- #footer -->
<div id="footer">

</div><!-- #footer -->


html, body {
	width: 100%;
	height: 100%;
}

#wrapper {
	width: 100%;
	min-height: 100%;
	margin-top: -75px;
	position: relative;
	clear:both;
	z-index: 4;
	overflow: hidden;
	font-size: .8125em;
	background: ;	
}

* html #wrapper{
	height:100%;
}

#footer {
	width: 100%;
	min-height: 75px;
	position: relative;
	clear:both;
	z-index: 5;
	font-size: .8125em;
	background: url(../images/site/footer.png) 0 0;	
}

#wrapper #header {
	width: 100%;
	border-top: 75px solid #FFF;
}

#wrapper #content {
	width: 320px;
	position: fixed
	top: 60px
        left: 30px;
	z-index: 1;
}

.col {
	width:320px;
	height: 9999em;
	position: fixed;
	z-index:0;
	top: 60px;
	left: 30px;
	bottom:105px;
	background: url(../images/site/content.png);
}

html>body .col {
	top: 60px;
}

The bottom margin isn’t there the content is going all the way down. What am I doing wrong or is this simply not the right approach?

Thank you in advance

donboe · December 30, 2012, 10:47am

When I take the top position out (60px), the bottom position is working, but then the top position is not working since I have declared an extreme height so then the background is going all the way up… Is there any other way to accomplish what I want?

PaulOB · December 30, 2012, 11:07am

Hi,

I’m not sure to which issue you really want to address. If its just the left sidebar then set it as position:absolute and give it a top and bottom position at the same time and set it to overflow:auto.

e.g.Like this example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
	margin:0;
	padding:0
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
h1, h2, p { padding:0 10px; }
#outer:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
html, body {
	height:100%;/* needed to base 100% height on something known*/
	text-align:center;
}
#outer {
	width:960px;
	background:#ffffcc;
	margin:auto;
	min-height:100%;
	margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
	text-align:left;
	clear:both;
	position:relative;
}
* html #outer { height:100% }
#header {
	background:red;
	height:40px;
	border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
	background:red;
	width:960px;
	margin:auto;
	height:40px;/* must match negative margin of #outer */
	clear:both;
}
#sidebar {
	position:absolute;
	top:110px;
	bottom:30px;
	width:250px;
	left:25px;
	overflow:auto;
	background:green;
}
#content { margin-left:300px; }
</style>
</head>
<body>
<div id="outer">
		<div id="header">
				<h1>Sticky Footer</h1>
		</div>
		<div id="content">
				<h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
		</div>
		<div id="sidebar">
				<p>Start lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text </p>
				<p>lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text </p>
				<p>lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text </p>
		</div>
</div>
<div id="footer">
		<p>Footer</p>
</div>
</body>
</html>

If that’s not what you were after then shout

donboe · December 30, 2012, 12:13pm

Hi Paul. The sidebar part was indeed where I was after. Obviously I made it to difficult for myself. Thanks a lot. I like to wish you all the best for the new year

PaulOB · December 30, 2012, 12:21pm

and best wishes to you also

donboe · January 2, 2013, 9:30am

Hi Paul. One last question about the CSS in your reply. I try to understand what those two pseudo classes are doing. Can you please tell me? Thank you in advance

PaulOB · January 2, 2013, 9:43am

Hi,

The first one is an old opera fix for the sticky footer:


/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

It places a float at the top of the body and gives it 100% height and forces the browser to redraw the footer properly. It obviously triggers some new algorithm as otherwise the footer doesn’t get redrawn when the window is moved upwards. It’s a long standing bug in Opera but seems fixed in latest versions although it has been fixed and subsequently reappeared before so I always leave it in place. The negative margin just pulls the float out of the way to the maximum allowed.

The other pseudo class is a float clearing mechanism but is also needed for ie8 to function properly.


#outer:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}

It just places generated content after the content in the element and clears it. Without it IE8 can also be stubborn to redraw the footer when the window is moved.

If you look in the css quiz you can read up on all the reasons as they were discovered and implemented.