1. #1
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    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
    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?
    Yu-gi-oh kaarten te koop klik!!
    no votes   Reply With Quote Reply With Quote

  2. #2
    Curahee Q's Avatar
    Registered
    07/12/07
    Location
    Hoogstraten
    Posts
    854
    iTrader
    0
    Mentioned
    0 Post(s)
    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="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>
    #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.
    no votes   Reply With Quote Reply With Quote

  3. #3
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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 Reply With Quote

  4. #4
    phil_r's Avatar
    Registered
    19/12/09
    Location
    Antwerpen
    Posts
    51
    iTrader
    0
    Mentioned
    0 Post(s)
    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 Phil
    no votes   Reply With Quote Reply With Quote

  5. #5
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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 Reply With Quote

  6. #6
    Homer`'s Avatar
    Registered
    06/05/07
    Location
    Diest
    Posts
    1,252
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ideas?
    Yu-gi-oh kaarten te koop klik!!
    no votes   Reply With Quote Reply With Quote

  7. #7
    design1's Avatar
    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é.

    Groeten
    Enjoy
    no votes   Reply With Quote Reply With Quote

  8. #8
    Metropolice's Avatar
    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.
    De goedkoopste host van de Benelux: Versio

    Eigen website nodig ? Contacteer me !
    no votes   Reply With Quote Reply With Quote

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in