PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

container 100%

Door Maikel B op 25-11-2011 21:29
2.049 views
Ik ben bezig met een layout maken ik html en css.

Ik zit alleen met een probleempje.

Ik heb mijn container op 100% staan maar zodra ik dan scroll zie ik dat die 100% de hoogte van mijn scherm is. Dus als ik scroll stopt de container.

Hoe kan ik de container altijd tot de onderkant laten lopen?
Iemand een idee?
O Obelix Idefix
25-11-2011 21:40
Ik vermoed dat je het hebt over height? Geen waarde meegeven?
Maikel B
25-11-2011 21:41 gewijzigd op 26-11-2011 11:38
dan haalt ie de background van de container weg.
Dus laat ie de container niet zien.

[size=xsmall]Toevoeging op 25/11/2011 21:46:13:[/size]


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

body 
{
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px; color: #000; 
	background-color: #3B3B3B; 
	text-align: left; 
	margin: 0px;
	padding: 0px;
}


div#container
{
	width: 690px;
    	height: 100%;
	border-left: 1px solid #FFF; 
	border-right: 1px solid #FFF;
	background-image: url("images/layout/header1.jpg");
	background-repeat: no-repeat;
	background-color: #61809E;
	margin: 0 auto; 
}

div#content 
{
	position: relative;
	top: 160px;
	margin: 0 auto;
	width: 642px;
}
div#content_left 
{
	width: 420px; 
	float: left; 
	padding-right: 9px;
}
div#content_right 
{
	width: 213px; 
	float: left;
}

div#content_l
{
	width: 404px;
	background-color: #FFF;
	padding: 4px 8px 8px 8px;
}

div#content_r 
{
	width: 199px;
	background-color: #FFF;
	padding: 4px 8px 8px 8px;
}




<!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=iso-8859-1">
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" title="Default_style">
	<link rel="shortcut icon" href="/images/layout/favicon.ico">
	<title>Test</title>

</head>
<body>

<div id="container">
	<div id="menu">
		<ul id="ddtabs1" class="basictab">
			<li><a href="index.php">Home</a></li>
		</ul>
	</div>

	<div id="content">
		<div id="content_left">
			<h1>Laatste nieuws</h1>
			<div id="content_l">
				Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
				Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
				Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
				Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
				Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
				Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
			</div>
		</div>

		<div id="content_right">
			<h1>Oud nieuws</h1>
			<div id="content_r">
				Test
			</div>
		</div>
	</div>
</div>

</body>
</html>
J Jack Sierkstra
26-11-2011 08:05 gewijzigd op 26-11-2011 08:13
Het komt door je floats. Als je die weghaalt zul je zien dat hij de hoogte wel meepakt.
Wouter J
26-11-2011 10:07
En om de floats te clearen -zoals ze dat noemen- gebruik je een clearfix:
#container:before  /* Officiele syntax is met ::, maar dit accepteert IE nog niet */
{
  content: '';
  display: block;
  clear: both;
}
Maikel B
26-11-2011 11:37
Als ik die floats weghaal bij #content_left en #content_right dan komt alle tekst onder elkaar te staan en dat moet niet. En de achtergrond loop dan nog steeds niet door.

Dit is hoe het eruit ziet als die floats er wel gewoon staan:

http://imageshack.us/photo/my-images/849/knipseli.jpg/

[size=xsmall]Toevoeging op 26/11/2011 22:29:33:[/size]

niemand meer een idee?

Reageren

Inloggen om te reageren