login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Hoe een "div" vertikaal schermvullend maken

Offline zandman - 06/02/2010 18:33
Avatar van zandmanNieuw lid Hoe maak ik een "<DIV>" die ongeacht de hoogte van een browserscherm altijd beeldvullend is van boven waar de "<DIV>" geplaatst is tot op de onderrand van het scherm (tot aan waar de pagina de marge heeft ingesteld).

Dus als de "<DIV>" een kleur heeft dat je vertikale balken of blokken over het scherm kan maken (al dan niet met tekst erin natuurlijk)

10 antwoorden

Gesponsorde links
Offline ndshomebrew - 06/02/2010 18:43
Avatar van ndshomebrew Nieuw lid zoiets als dit : Dynamicdrive - css layouts ?
Offline Slives - 21/04/2010 01:56
Avatar van Slives Nieuw lid Je kan dit doen door een <p /> tag aan het einde van je <body> toe te voegen, je koppelt aan deze <p /> een class die zal zorgen voor uw <body> ruimte.
So, helemaal op het einde juist vóór </body> voeg je het volgende:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <p class="clear" />
.
In je css-bestand definieer je de class clear:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. p.clear{
  2.     clear: both;
  3.     height: 0;
  4.     margin: 0;
  5.     padding: 0;
  6. }

Sla je bestanden op and enjoy it! 

Greetz Slives
Offline WouterJ - 21/04/2010 07:06
Avatar van WouterJ HTML gevorderde Dat kan je doen met 100% width en breedt:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container{
  2. padding: 0;
  3. margin: 0;
  4. width: 100%;
  5. height: 100%;
  6. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2. de pagina.....
  3. </div>
Offline larssy1 - 21/04/2010 09:21 (laatste wijziging 21/04/2010 09:25)
Avatar van larssy1 MySQL beginner Ik denk dat waldio zegt is wat jij wilt zandman.
echter moet je af en toe bij height er ook nog auto achter zetten.

dus:
height: 100% auto; (is niet altijd zo, ik heb enkel wat ervaringen gehad, waarbij dit moest)
Offline ArieMedia - 21/04/2010 13:46 (laatste wijziging 21/04/2010 13:47)
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde		 100% height bestaat niet.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. position: absolute;
  2. top: 0px;
  3. bottom: 0px;


Dit is altijd beeldvullend.
Offline gnotrgnotr - 21/04/2010 16:04
Avatar van gnotrgnotr Nieuw lid
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container{
  2. position: absolute;
  3. padding: 0;
  4. margin: 0;
  5. width: 100%;
  6. height: 100%;
  7. }
Offline WouterJ - 21/04/2010 16:26
Avatar van WouterJ HTML gevorderde @gnotrgnotr, die oplossing gaf ik ook al.

@ArieMedia, 100% height bestaat wel. Type hier maar body{ height: 100%;} in.
Offline ArieMedia - 23/04/2010 22:26
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde
Waldio schreef:
@gnotrgnotr, die oplossing gaf ik ook al.

@ArieMedia, 100% height bestaat wel. Type hier maar body{ height: 100%;} in.

Dit bevestigd dat height: 100% valid CSS is, maar dat betekend niet dat het bestaat.

Als ik een CSS maak en een div height 100% geeft, dan is hij niet beeldvullend.
Offline WouterJ - 23/04/2010 22:29
Avatar van WouterJ HTML gevorderde Dat komt omdat je dan 100% van niks hebt. Je moet dus aangegeven dat de hoogte van de body 100% is. Dan klopt het.
Offline ArieMedia - 23/04/2010 22:33
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde
Waldio schreef:
Dat komt omdat je dan 100% van niks hebt. Je moet dus aangegeven dat de hoogte van de body 100% is. Dan klopt het.
uitgetest en ik kan het inderdaad bevestigen dat ik een volledig rood beeldscherm had met height: 100%;

Maargoed, top: 0px;, bottom: 0px; werkt ook xD
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.24s