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

[CSS] Div zo lang als inhoud / Div over hele hoogte scherm

Door - - op 25-10-2006 21:00
6.625 views
Hoi,

Weer eens een vraagje: "Hoe krijg je een div over de hele hoogte van het scherm?"
Nee, het is niet zó simpel:

<?php
#div
{
    height: 100%;
}
?>

Want de bedoeling is: Ik heb een box (div) met daarin header, menu en de rest van de zooi. Nu moet de content, die een variabele inhoud heeft, zo hoog worden als de ruimte die overblijft. Stel menu + header is 100px, schermhoogte is 800px, de content moet dan 700px worden.
Nu wil ik aub niet met JS, voor de reden ga maar eens even lekker Googlen: [google]nadelen javascript[/google]
Iemand een idee?

Groeten,
Jonathan

[edit]Zie post op pagina 2[/edit]
- -
25-10-2006 22:16
Bedankt voor het klooien. (Niet dat ik er iets mee ben opgeschoten, maar toch;) )
[edit]Dit is nou echt zoiets voor Jan. hopen dat hij even komt kijken :-)[/edit]
- -
25-10-2006 22:24
is nog niets, want de content is daar een vaste grootte (85%):

<?php


.centermain {
	background-color: transparent;
//////////////////////////////
	height:85%;
//////////////////////////////
	width:100%;
	color:#003366;
	border-color:#000000;
	border-style:none;
	overflow:auto;
	background: url('rechtsboven.gif') no-repeat right top fixed;
	
	}



?>
R
Robert Deiman
25-10-2006 23:35
85% is geen vaste hoogte Jonathan, die rekt mee met de pagina. Ik heb er (nog) geen minimale hoogte en of breedte aan gegeven, maar de pagina ziet er bij elke grootte, qua verhoudingen precies hetzelfde uit, en is altijd 100% hoog en 100% breed in je browservenster.
Dat was toch wat je wou, dat stukje kan je er als het goed is gewoon uithalen hoor.
De GEHELE pagina, dus niet de content is altijd 100% hoog. als je alles weghaalt (in de HTML) en dan de content op 100% hoogte zet, kan je stukje voor stukje dingen uit de css halen.. (de overbodige dingen natuurlijk sowiezo) zodat je een pagina overhoud met een div van 100% hoog.
- -
25-10-2006 23:37
maar de header moet niet een percentage maar een pixel aantal zijn, waardoor het niet lukt om de content te verpercentageren
K
Kalle P
26-10-2006 00:25
Ik heb het snel door gelezen maar tis me niet echt duidelijk wat je echt wilt.

Je wilt dat alles meerekt met het langste is?

google dan op faux columns
Willem Jan Z
26-10-2006 08:23
Hier een stukje van een template die ik nu gebruik:

    *{
	margin:0;
	padding:0;
}
html{
	height:100%;
}
body{
	background:#b3c879 url(../images/bodybg.gif) repeat-y top center;
	text-align:center;
	font:11px Verdana,sans-serif;
	color:#4e4b44;
	height:100%;
}
#container{
	text-align:left;
	margin:0 auto;
	width:550px;
	height:100%;
}

/* FooterStickAlt */
#nonfooter{
	position:relative;
	min-height:100%;
}
* html #nonfooter{
	height:100%;
}
#footer{
	position:relative;
	margin-top:-50px;
	height:50px;
}


Maar ik moet zeggen, ik heb hem niet in IE getest, dus of het werkt weet ik eigenlijk niet :)
Maar bij mij ziet het er wel goed uit, ongeveer zoals de link van Jan.
R
Robert Deiman
26-10-2006 09:59
Jonathan Hogervorst schreef op 25.10.2006 23:37
maar de header moet niet een percentage maar een pixel aantal zijn, waardoor het niet lukt om de content te verpercentageren


Toch wel.. als de top bijvoorbeeld 50px is, kan je dit doen:


height:100%-50px;
position:absolute;
top:50px;


Reageren

Inloggen om te reageren