css -> height bepalen dmv andere div

Door /home/joost op 18-01-2009 14:14

508 views

dit is mijn code:


<div class="midden" id="midden" style="height: 100%; border-left: thin solid #FFFFFF;">
				<div class="links">
					Links
				</div>
				
				<div class="content" id="content">
					<script language="javascript" type="text/javascript">
						var e = document.getElementById("midden");
						document.getElementById('content').style.height = e.offsetHeight;
					</script>
					<p>Test
					vd<br />
					sfg<br />
					sdf<br />
					g<br />
					fg<br />
					d<br />
					g<br />
					dg<br />
					d<br />
					fg<br />
					df<br />
					g<br />
					df<br />
					gd<br />
					fg<br />
					dfgdf<br />
					gd<br />
					fg</p>
					  <p>gfhf</p>
					  <p>gh</p>
					  <p>fgh</p>
					  <p>fh</p>
					  <p>f</p>
					  <p>h</p>
					  <p>fh</p>
					  <p>fg</p>
					  <p>hfgh<br />
						df<br />
						g<br />
						df<br />
						g<br />
						df<br />
						gd<br />
						f<br />
						gd<br />
						g<br />
						df<br />
						df<br />
						gd<br />
						fg<br />
						dfgdf<br />
						gd<br />
						fg<br />
						df<br />
						g<br />
						df</p>
					<p>ghj</p>
					  <p>fgjh</p>
					  <p>fgh</p>
					  <p>fg</p>
					  <p>hf</p>
					  <p>gh<br />
						g<br />
						df<br />
						gd<br />
						f<br />
						gd<br />
						g<br />
						df<br />
					g</p>
				</div>
			</div>

De bedoeling is dat de content-div even hoog word als de div midden (waar de content div inzit).
Wanneer dit is gelukt valt de footer niet over de tekst heen (wat nu wel het geval is).

klikje

Hiermee lukt het niet echt, kan iemand mij helpen ??

mvg Joost

Sander

18-01-2009 14:24

normaal dit even veranderen zou moeten werken (denk ik)


html, body  {
       height:100%;
}

div.container {
	background-color: #33425C;
	width: 787px;
	margin: 0px auto;
	position: relative;
	min-height: 90%;
	height: 90%;
       _height: 90%;
}

zou is je pagina - 100% hoog, maar je content (header, columns etc. alles behalve je footer) 90% hoog

dan mag je niet vergeten om dit te doen







<body>
	<div class="container">
       <div .......>

     </div> <--- Deze is van je container

   <div class="footer"></dv>

Zo blijft je footer uit je container onder aan de pagina, en zal deze niet in je content komen.

Hopelijk help dit ?

// Edit

Waarom maak je de footer Absolute ?
moet je niet doen, zeker niet als deze dan binnen een relative object staat.
Zwier die positions eruit, zeker uit je footer. Dan zal het bovenstaande werken!

/home/joost

18-01-2009 14:52

Ja zo-ongeveer wel ja, heb t iets aangepast maar goed, het werkt nu :d zie het resultaat: klik

dankje, mvg Joost.

Sander

18-01-2009 14:58

Persoonlijk vind ik het niet aangenaam om door sites te gaan met een scrollbar in de content maar dat is jouw keus natuurlijk :)

goed dat het in ieder geval al werkt ;)

Hipska BE

18-01-2009 15:49

Waarom heb ik hier 2 verticale scrollbalken? Lijkt me niet echt gewenst...

Sander

18-01-2009 16:02

Hipska schreef op 18.01.2009 15:49
Waarom heb ik hier 2 verticale scrollbalken? Lijkt me niet echt gewenst...

omdat hij het niet correct heeft opgelost. Als je het echt anders wil:

css



html, body {
	margin: 0;
	height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
div.container {
	background-color: #33425C;
	width: 787px;
	margin: 0px auto;
	min-height: 95%;
	_height: 95%;
}





div.header {
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 787px;
	margin-top: -1px;
}
div.header_tekst {
	text-align: right;
	padding-top: 155px;
	padding-right: 4px;
}





div.midden {
	padding-left: 10px;
	text-align: left;
	background-color: #33425C;
	height:auto;
}
div.links {
	width: 30%;
	float: left;
}
div.content {
	width: 70%;
	overflow: hidden;
	float: left;
	height: auto;	
}



div.footer {
	text-align: center;
	background-color: #33425C;
	font-size: 14px;
}



<!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="Content-Type" content="text/html; charset=UTF-8" />
<title>programbox.nl voor al uw internet applicaties</title>
<link type="text/css" rel="stylesheet" href="css.css" />
</head>

<body>
<div class="container">
	<div class='header'><div class="header_tekst">Disclaimer - Sitemap</div></div>
			<div class="midden">
				<div class="links"></div>
				
				<div class="content">  </div>
                
			</div>
</div>
				<div class="footer">© 2009 www.programbox.nl</div>
</body>
</html>

dan werkt ie wel

Reageren

Inloggen om te reageren