100% Height Using Header

3 replies [Last post]

Sun, 2008-12-14 21:03

Ek0nomik

Offline

newbie

Last seen: 14 years 7 weeks ago

Joined: 2008-12-14

Posts: 2

Points: 0

The problem I am having is that I want my navigation and content div's to be 100% of the browser height, but it keeps going 175px further than 100% because of my header. I have been searching for quite some time for a solution, but no luck. If anyone has any advice, I'd appreciate it.

Here is the CSS:

@charset "utf-8";
/* Great Harvest Bread CSS */
 
body {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 12pt;
	color: #764200;
	text-align: left;
	height: 100%;
	margin:0px;
	padding:0px;
	border-left:0px;
	border-right:0px;
}
 
html {
	height:100%;
}
 
#wrapper {
	height: 100%;
}
 
#banner {
	position:absolute;
	width:1024px; 
	left:0px;
	top:0px;
	height: 175px; 
	background-image:url('../images/banner.background.wheat.png');
}
 
#leftcontent {
	position: absolute;
	left:0px;
	top:175px;
	width:232px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	background-color:#764200;
	height: 100%;
	overflow: auto;
	margin-bottom: -175px;
}
 
#rightcontent {
	position:absolute;
	width:712px;
	left:272px;
	top:175px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	background-color:#FEDB96;
	height: 100%;
	overflow: auto;
	margin-bottom: -175px;
}
 
}

Here is the HTML:

<div id="wrapper">
<div id="banner"><img src="images/banner.logo.png" alt="Great Harvest Bread Logo" width="891" height="175" hspace="53" /></div>
<div id="leftcontent">
<jsp:include page="navigation.jsp" />
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
 
<div id="rightcontent">
<p></p>
  <h2>Home</h2>
  Content goes here
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div>

Tags:

CSS Layouts

Sun, 2008-12-14 21:12

Deuce

Offline

Guru

Somewhere, USA

Last seen: 5 years 29 weeks ago

Somewhere, USA

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4424

Points: 1843

can you please provide a

can you please provide a link or all your HTML from the doctype to the ?
Also, I doubt you need absolute positioning, maybe an image of what you are trying to do?
Thanks!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Mon, 2008-12-15 03:26

Ek0nomik

Offline

newbie

Last seen: 14 years 7 weeks ago

Joined: 2008-12-14

Posts: 2

Points: 0

Here is all of the

Here is all of the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page import="java.sql.*, java.lang.*" %>
<html>
<head>
<title>GreatHarvest</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="wrapper">
<div id="banner"><img src="images/banner.logo.png" alt="Great Harvest Bread Logo" width="891" height="175" hspace="53" /></div>
<div id="leftcontent">
<jsp:include page="navigation.jsp" />
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
 
<div id="rightcontent">
<p></p>
  <h2>Home</h2>
  <p>stuff goes here</p>
</div>
</div>
</body>
</html>

I am not entirely sure what the positioning does tbh, I will read up on that more.

The page layout is like this:

|----Header-Image----|
|Nav|-----Content----|

I want my Navigation and Content to have a 100% height (go to the very bottom of the browser window). I have this working, *but*, it is going 100% + 175px because of the header div at the top. I just want it to fill the browser window, not go 100% and account for the header image. I tried putting everything in a wrapper div, but that didn't seem to work.

Thanks!

Wed, 2009-01-14 03:21

Athor

Offline

newbie

Last seen: 14 years 3 weeks ago

Joined: 2009-01-14

Posts: 1

Points: 0

Did you manage to fix this?

I am having the same issue as this.

Heres my HTML:

<!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=utf-8" />
<title>How To</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div class="wrapper">
 
<div id="topHeader">
 
</div>
 
 
<!-- start header -->
	<div id="logo">
	</div>
 
	<div id="header">
		<div id="menu">
		</div>
	</div>
<!-- end header -->
 
 
 
 
 
 
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
 
		<p>tes</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>t </p>
	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="sidebar">
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
 
 
	</div>
	<!-- end sidebar -->
	<div style="clear: both;">&nbsp;</div>
</div>
<div class="push"></div>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
 
</div>
 
<!-- end footer -->
</body>
</html>

And the CSS

html, body { height: 100%; margin: 0;
	padding: 0; }
 
 
body {
	background: #0BA1DE;
	font-size: 14px;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: justify;
	color: #FFFFFF;
}
 
 
.wrapper {
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto;
	/* position:relative;*/
 }
 
 
 
 .footer {
     height:60px;   /* Height of the footer */
	 background:#0F0;
	 margin: 0 auto;
	 position:absolute;
     bottom:0;
     width:100%;
 
 }
 
 .push {
     height: 4em;
 
 }
 
/* Header */
 
#header {
	width: 960px;
	margin: 0 auto;
	height: 60px;
}
 
#topHeader {
	margin: 0;
	padding: 0;
	background:#0F0;
	height:20px;
}
 
/* Menu */
 
#menu {
	float: left;
	width: 960px;
	height: 60px;
	background:#0FF;
	font-family: Arial, Helvetica, sans-serif;
}
 
 
 
 
/** LOGO */
 
#logo {
	width: 960px;
	height: 80px;
	margin: 0 auto;
	background:#FFF
}
 
 
 
/* Page */
 
#page {
	width: 960px;
	background: #000;
	height:100%;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	position:absolute
}
 
 
#content {
	float: left;
	width: 660px;
	background:#FFF;
	height:100%;
 
 
 
}
 
 
#sidebar {
	float: right;
	width: 300px;
	margin: 0;
	padding: 0;
	background:#0CF;
	/*height:100%;*/
 
 
 
}

100% Height Using Header

can you please provide a

Here is all of the

Did you manage to fix this?

User login

Navigation