Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

100% hoogte + header

koosax - 28/03/2012 18:28 (laatste wijziging 28/03/2012 18:30)
Lid		Hoi, Ik heb (namens een vriend van me) een vraagje. Hij is bezig met een website die simpel gezegd als volgt in elkaar zit: bovenaan een header (100% breed 80px hoogte) daaronder 2 kolommen: links (100% hoogte 40px breed) rechts (geen vaste breedte en hoogte) Het probleem is nu de 100% hoogte van de linkerbalk, dit is nu gedaan met een push (zie onderstaande code). Alleen doordat er een header boven staat met een hoogte van 80px krijgen we nu nog steeds een scrollbar omdat de hoogte nu 100%+80px is. Misschien een beetje een vage uitleg dus daarom hieronder zowel de HTML als de CSS. HTML CSS :!: een belangrijk punt is dat de header NIET over de linkerbalk heen mag floaten aangezien de inhoud van de header transparant wordt. Alvast bedankt!

4 antwoorden

Gesponsorde links

vinTage - 28/03/2012 21:42

Nieuw lid

Nadeel van klooien met hoogtes en absolute, is dat het niet echt liquid is..

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!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>Untitled Document</title>
<style>
* {
	margin: 0;
    padding:0;
}

html, body{
	height: 100%;
	background: #333;
}

#header{
	width: 100%;
	height: 80px;
	background: #999;
}

#left{
	position: absolute;
	background: blue;
	width: 40px;
	top:80px;
    bottom:0
}

#right{
	position:absolute;
  left:40px;
  top:80px;
  bottom:0;
  right:0;
  background:#fff
}


</style>
</head>

<body>

	<div id="header">header</div>
    <div id="left">left</div>
    <div id="right">right</div>

</body>
</html>

<!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>Untitled Document</title>
<style>
* {
	margin: 0;
    padding:0;
}
 
html, body{
	height: 100%;
	background: #333;
}
 
#header{
	width: 100%;
	height: 80px;
	background: #999;
}
 
#left{
	position: absolute;
	background: blue;
	width: 40px;
	top:80px;
    bottom:0
}
 
#right{
	position:absolute;
  left:40px;
  top:80px;
  bottom:0;
  right:0;
  background:#fff
}
 
 
</style>
</head>
 
<body>
 
	<div id="header">header</div>
    <div id="left">left</div>
    <div id="right">right</div>
 
</body>
</html>

koosax - 30/03/2012 12:57
Lid		vinTage schreef: Nadeel van klooien met hoogtes en absolute, is dat het niet echt liquid is.. [..code..] Aan deze oplossing hadden wij ook al een beetje gedacht alleen het probleem is dat als er veel content is (en dus een scrollbar) de linker- en rechterkolom niet meerekken. Is hier niet een oplossing voor?

Jointjeff - 30/03/2012 14:44
HTML interesse		Kan je het element niet met javascript/jquery in hoogte aanpassen? javascript code - Bekijk de code zonder highlighting - Klap code in $('#content').css({ height: $('#left').height - 80 + 'px' )} $('#content').css({ height: $('#left').height - 80 + 'px' )}

vinTage - 30/03/2012 15:54
Nieuw lid		gewoon overflow meegeven

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten