4 replies [Last post]
Splavid
Offline
newbie
Bangkok
Last seen: 2 years 29 weeks ago
Bangkok
Timezone: GMT+7
Joined: 2012-01-02
Posts: 3
Points: 4

I searched and found similar questions, but couldn't find my exact problem (correct me if I'm wrong).
I want a 100% wide header at top, 100% wide footer at bottom and 960px 'content' or 'wrapper' in between. If the browser window is resized smaller, the footer should rise, but not cover any content inside the 'content/wrapper.' This page illustrates it:
http://davesguitarplanet.com/expanding_wrapper.html

You could view the source of above link to see css and html, but here they are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="wrapper-Type" wrapper="text/html; charset=UTF-8" />
<title>Expanding Wrapper Div</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}
#content {
	height: 300px;
	width: 940px;
	background-color: #6F9;
	margin-right: auto;
	margin-left: auto;
}
p {
	padding: 6pt;
	margin: 0px;
}
#wrapper
 {
	width: 960px;
	background-color: #39F;
	height: 100%;
	text-align: center;
	margin: 0px auto;
	padding: 0px;
}
#header {
	background-color: #FF6;
	height: 50px;
	width: 100%;
	text-align: center;
}
#footer {
	background-color: #F3C;
	height: 50px;
	width: 100%;
	position: absolute;
	bottom: 0;
	text-align: center;
}
</style>
 
</head>
 
<body>
 
<div id="header">HEADER DIV</div>
 
<div id="wrapper">
  <p>WRAPPER DIV</p>
 
<div id="content">
  <p>CONTENT DIV</p>
  <p>&nbsp;</p>
  <p>&gt;&gt; I want (BLUE) WRAPPER DIV to auto-expand downward to top of FOOTER DIV, </p>
  <p>no matter vertical height of viewport (browser window) &lt;&lt;</p>
  <p>BUT: I want FOOTER DIV to STOP rising up if it reaches (GREEN) CONTENT DIV </p>
</div>
 
  <p>WRAPPER DIV</p>
</div>
 
<div id="footer">FOOTER DIV</div>
 
 
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 hour 29 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5076
Points: 2654

Hi Splavid, Looks like you

Hi Splavid,
Looks like you are pretty close.
To fill all available space with the wrapper div:

html, body{
  height:100%;
}

So that the footer never covers the wrapper content, you will need experiment and work out what you want to give.
It might mean playing with @media queries so you change the layout at smaller screen sizes.

Splavid
Offline
newbie
Bangkok
Last seen: 2 years 29 weeks ago
Bangkok
Timezone: GMT+7
Joined: 2012-01-02
Posts: 3
Points: 4

Tony wrote: So that the

Tony wrote:

So that the footer never covers the wrapper content, you will need experiment and work out what you want to give.
It might mean playing with @media queries so you change the layout at smaller screen sizes.

Tony: Thanks! It works, except for the footer covering the content. I'm not sure what you mean by the above two sentences.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 hour 29 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5076
Points: 2654

If you resize the window, you

If you resize the window, you will get to a point where the footer no longer fits on the page or sits over the content.
You have to decide how you are going to handle that, as it is different from having the footer at the bottom of the viewpoint.
It's not as straight forward as it first appears.
@media queries give you the option of changing styles at different screen sizes, so you could keep the footer how it is until the page height gets below a certain size then position it relative.

Splavid
Offline
newbie
Bangkok
Last seen: 2 years 29 weeks ago
Bangkok
Timezone: GMT+7
Joined: 2012-01-02
Posts: 3
Points: 4

I see. So there's no way for

I see. So there's no way for the footer to 'know' that it must stop at a certain kind of div? I wonder if putting in an invisible 'clear' or something, would work?