Archief - 100% screen height werkt niet

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
H

Homer`

Legacy Member
OK, ik wil dus dat mijn webpagina een min-height heeft van heel de hoogte van het scherm (maw heel het scherm verticaal vult) en ik heb op google gezocht, maar geen enkele oplossing werkt.. Iemand een idee?

HTML
Code: 
<!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" xml:lang="nl" lang="nl">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Titel</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="Bram Vanroy" name="author"/>
<meta content="Copyright ©2010" name="copyright"/>
<meta content="Notenbalkers jeugdvereniging schaffen muziek" name="keywords"/>
<!-- TemplateBeginEditable name="head" -->
<link rel="shortcut icon" href="../images/template/favicon.ico"/>

<link href="css/mainstylesheet.css" rel="stylesheet" type="text/css"/>
<!-- TemplateEndEditable -->
</head>

<body>
<div id="trompetdiv">
	<div id="wrapperdiv">
		<div id="newsdiv">
	    Content for  id "newsdiv" Goes Here
		</div>
        <div id="bannerdiv"><a href="#"> <img src="images/template/banner.png" alt="header" name="header" width="800" height="123" border="0" id="header" /></a>
        </div>
	</div>
</div>
</body>
</html>

CSS
Code: 
@charset "utf-8";

html, body, #trompetdiv, #wrapperdiv {
	min-height: 100%;
}

body {
	background-image: url(../images/template/bgpattern.jpg);
	background-repeat: repeat;
	margin: 0;
	padding: 0;
	background-attachment: fixed;
}

#trompetdiv {
	background-image: url(../images/template/trompetten.png);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;;
}

#wrapperdiv {
	width: 840px;
	margin: 0 auto;
	background-image: url(../images/template/textbg.png);
	background-repeat: repeat-y;
}
En dan nog wat code voor de overige divs.
Maar nu krijg ik gewoon de hoogte van al mijn content..

Help?
C

Curahee Q

Legacy Member
min-height werkt ook niet in alle browsers. Wat je best kan doen (of wat ik altijd doe) is een div van 1 pixel links toevoegen met een hoogte van 100%.

Code: 
<body>
<div id="trompetdiv">
	<div id="min-height"></div>

	<div id="wrapperdiv">
		<div id="newsdiv">Content for  id "newsdiv" Goes Here</div>
        	<div id="bannerdiv"><a href="#"> <img src="https://www.beyondgaming.be/forums" alt="header" name="header" width="800" height="123" border="0" id="header" /></a></div>
	</div>
</div>
</body>

#min-height {
height: 100%;
width: 1px;
float: left;
}

De width van 1 pixel is nodig voor IE.

Aan wrapper-div natuurlijk ook een float: left meegeven.
H

Homer`

Legacy Member
Dit werkt ook niet en ik kan ook niet begrijpen waarom het zou werken.. :s
p

phil_r

Legacy Member
Dat kan inderdaad ook niet,
wat ook niet kan is hoogte in % zetten denk ik want dat werkt gewoon niet in de browsers, wat je wel kan doen is met absolute position gaan werken en bv een footer-div instellen op bottom: 0px dan kan je daarin ook iets voor de footer zetten en boven de footer, een andere div dan, wordt tot beneden uitgelijnt, of je moet een tabel/div maken en daar een vaste hoogte instellen bv: min-height: 100px, een trukje om het wel te kunnen ;-).
H

Homer`

Legacy Member
Op google zie ik toch mensen die het met '%' doen, dus ik denk wel dat dat zou moeten gaan hoor?

Maar goed, jij stelt voor om een footerdiv te maken (bottom: 0px) en mijn 'middenste' div position: absolute? Ik begrijp niet goed wat ik met die absolute position moet :$ (nog wat een leek hé..)
d

design1

Legacy Member
In je css staat er al een fout bij #trompetdiv staat er bij background-attachement: fixed;;
Daar mag er dus maar 1 punt komma staan (eventueel zorgt dit mss voor problemen).

Verder kan je zeker werken met % in height, ik doe het zelf dan voornamelijk naar dynamische content gericht.

Kzie het voorlopig ook niet direct waar het kan aanliggen moest je het vinden laat hier iets weten hé.

Groeten
M

Metropolice

Legacy Member
Je moet die position: absolute gewoon eens ingeven in google dan krijg je een duidelijke uitleg. Volgens mij kan je de height toch ook niet in percenten weergeven zenne. De beste manier is idd met die bottom div werken.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan