Thread: 100% screen height werkt niet
-
05-01-2010, 19:49 #1
100% screen height werkt niet
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
CSSCode:<!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>
En dan nog wat code voor de overige divs.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; }
Maar nu krijg ik gewoon de hoogte van al mijn content..
Help?Yu-gi-oh kaarten te koop klik!!no votes
Reply With Quote
-
-
05-01-2010, 20:19 #2
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%.
#min-height {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="http://www.9lives.be/forum/images/template/banner.png" alt="header" name="header" width="800" height="123" border="0" id="header" /></a></div> </div> </div> </body>
height: 100%;
width: 1px;
float: left;
}
De width van 1 pixel is nodig voor IE.
Aan wrapper-div natuurlijk ook een float: left meegeven.no votes
Reply With Quote
-
05-01-2010, 20:25 #3
Dit werkt ook niet en ik kan ook niet begrijpen waarom het zou werken..
Yu-gi-oh kaarten te koop klik!!no votes
Reply With Quote
-
05-01-2010, 21:01 #4
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 ;-).Regards Philno votes
Reply With Quote
-
05-01-2010, 21:45 #5
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é..)
Yu-gi-oh kaarten te koop klik!!no votes
Reply With Quote
-
06-01-2010, 18:31 #6
Ideas?
Yu-gi-oh kaarten te koop klik!!no votes
Reply With Quote
-
06-01-2010, 18:46 #7Approved 9-lifer
- Registered
- 31/08/07
- Location
- Assebroek
- Posts
- 380
- iTrader
- 14 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
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é.
GroetenEnjoyno votes
Reply With Quote
-
06-01-2010, 19:46 #8Member
- Registered
- 13/10/08
- Location
- Aartselaar / Leuven
- Posts
- 196
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/1
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.
no votes
Reply With Quote
