min height 100%

Status
Niet open voor verdere reacties.
J

jeel2008

Gebruiker
Lid geworden
30 okt 2008
Berichten
839
hallo,
hoe maak ik een pagina v/e site minstens honderd procent hoog?
ongeacht of er content aanwezig is.
ga je naar hier: www.jeelsites.nl
dat ziet er niet uit, qua hoogte.
ga je naar hier:
http://www.jeelsites.nl/databases.php
en je vult bijvoorbeeld 'arma' in , in het zoekveld, dan ziet het er nog niet uit qua hoogte.
vul je echter de letter a in, dan ziet het er wel uit. omdat het scherm gevuld wordt, bij mij althans, maar wie weet bij iemand met een heel hoog scherm niet. (in dit geval zo goed als uitgesloten , maar het gaat om het idee).

ik moet dus zeker weten dat de min-height altijd honderd procent is.
content auto lukte aardig inzake het oprekken vd tabel (bij databases) als je veel zoekresultaten hebt, maar het is niet genoeg bij weinig resultaten en het is ook niet zeker, zoals gezegd, bij mensen met een heel groot scherm.

helaas kan ik niet dit doen: <div style="min-height: 100%; height: auto; "> . dat is een beetje dubbelop vermoed ik.
 
Laatst bewerkt:
het is wel overzichtelijker vind ik.
door midel van javascript is de resolutie op te vragen, hieruit zou je de height kunnen bepalen ;)
 
Laatst bewerkt:
hallo csshunter

hmmm, ik heb in je broncode gekeken en dat ook toegepast bij jeelsites:
html: height 100%
body: min-height: 100%;

maar het scherm blijft klein.
behalve als je er content in zet dan rekt het mee.

zie voorbeeld:
1. http://www.jeelsites.nl/index.html --> rekt mee
2. http://www.jeelsites.nl/contact.html --> rekt niet mee (want geen content)
3. http://www.jeelsites.nl/databases.php, rekt mee, maar niet ver genoeg als er te weinig content is om het scherm te vullen. ik wil dus altijd een volledige 100% body. waarom? omdat het mooier is, vind ik, en omdat je dan niet de ene pagina een scrollbalk hebt rechts en de andere pagina niet. want dan verspringt je pagina en dat is lelijk.

ik kan natuurlijk KEIHARD een hoogte van 5000px meegeven, zodat ik zeker weet dat bij iedereen waar ook ter wereld het scherm wel gevuld zal zijn van boven naar beneden, maar misschien bestaat er een subtielere manier?
 
Hoi jeel2008,
hmmm, ik heb in je broncode gekeken en dat ook toegepast bij jeelsites
Klik om te vergroten...
Nop, ik heb:
HTML: 
<body>
   <div id="content">
   ...
   </div>

   <div id="footer">
   ...
   </div>
</body>
En jij hebt:
HTML: 
<body>
   <div class="container">
      <div id="header">
         ...
      </div>

      <div id="menu">
         ...
      </div>

      <div id="content">
         ...
      </div>

      <div id="footer">
         ...
      </div>

   </div>
</body>
Er zijn verschillen! Binnen de <body> heb je eerst een #container staan, waar de #content in zit maar ook nog meer. Ik noem #content: alles wat niet de #footer is. En nog belangrijker: de <body> heeft bij mij een relatieve positie, en de #footer een absolute positie.
Bij jou niet (tenminste niet op de opgegeven pagina-links), en dan gaat het daar scheef. ;)

Als je het ombouwt, gaat het goed:
  • www.bliksekaters.nl/tests/jeels-A.htm
  • De body moet de background-kleur van de inhoud krijgen, dan loopt die <div> ogenschijnlijk door tot op beneden.
  • Om de blauwe randjes om de andere <div>'s te krijgen, kan dan geen margin-top en margin-bottom gebruikt worden, maar moet je het blauw in een border-top en border-bottom zetten.
  • De IE-6 hack kan mooi in een Conditional Comment komen.
Met vriendelijke groet,
CSShunter
__________
PS: De verspringende scrollbalk (in FF) bij wisseling tussen een korte en een lange pagina kan je in het algemeen vermijden door de html een height:100% te geven en een padding-bottom van 1px.
Dan moet FF een scrollbalk plaatsen om die ene px te kunnen bereiken. :)
 
Laatst bewerkt:
100%

hallo css hunter
nu werkt het inderdaad zoals ik wil (moet nog wel ff puntjes op i zetten/paars en wit weghalen en de styles in een cssbestand zetten):
http://www.jeelsites.nl/databases.php.

die container was een restant van mn vruchteloze poging alles in een div te gieten en die dan maar 100% hoog te maken. hopend dat ie de hele handel zou meenemen.

van die ene pixel ivm scrollbar: goeie tip!

bedankt voor je aanwijzingen

met vriendelijke groet, jeel2008
 
foutje?

hallo css hunter,
ik wil nog even terugkomen op lange en korte pagina
dat werkt goed, alleen hier loopt het scheef
http://www.jeelsites.nl/sliders/slider.html
de footer wordt overschreven door een deel vd tabel
is dat misschien omdat ik een div heb geplaatst, met float:left waarin de tabel staat?
ik zie het verband niet, maar het moet toch ergens aan liggen.
css.jpg
 
Ja, 't zit 'm gedeeltelijk in de twee floats (left en right): na die floats hoort een "clear" te komen om de background van de pagina te laten doorlopen tot aan het ondereind van de floats, en om de #footer daaronder te kunnen laten beginnen.
  • Het verband is, dat een float buiten de "normal flow" van de html-opbouw zit, en losgeweekt aan het drijven is. Dat wordt weer hersteld door het "clearen" (vrijmaken = door laten lopen onder de floats).
Tweede punt is, dat hier de #footer binnen de #container zit, in plaats van los ervan (in de #container zit alles behalve de #footer).
Met dit:
HTML: 
(...)
    <div style="float: right;">
        <img src="voorbeeld.jpg" width="314" height="283"><br>
        <em>afzonderlijk van elkaar aan te klikken</em><br>
        <br>
        <img src="handleiding.jpg" width="264" height="223"></div>
        <br>
        <br>
        <!-- InstanceEndEditable -->
    </div>

    <div style="clear: both"><!-- ! --></div>

</div><!-- eind #container -->

<div class="menu a" id="footer">
    Hier wordt de inhoud voor  id "footer" weergegeven
</div>

</body>
<!-- InstanceEnd --></html>
zou je een eind in de buurt moeten komen.

Met vriendelijke groet,
CSShunter
_____________
PS: Ik schrok me eerst een hoedje van de 25 html-Errors (1e check voor ik verder ga kijken), maar dat zijn 23 dezelfde lege targets en twee ontbrekende alt'jes, dus stelt niets voor. :)
 
Laatst bewerkt:
bedankt, inderdaad, dit werkt. weet ook niet hoe die footer nu in de container terecht kwam, een beetje zitten dommelen vermoed ik.
nu werkt het beter, mede dankzij de clear dus.

die 23 lege targets waren weer onstaan door niet in de code te werken, maar wel te plakken en slepen. ze bleven staan.
heb ze nu verwijderd.

met vriendelijke groet, jeel2008
 
weet ook niet hoe die footer nu in de container terecht kwam, een beetje zitten dommelen vermoed ik.
Klik om te vergroten...
Of gewoon beetje scheef geplakt, omdat toen net de poes op de muis sprong. :)
 
nog ff terugkomen op die stretch van 100%...
als ik nu een menu aan de linkerkant heb met een andere kleur dan de body, kan die dan ook meestretchen?
ik heb m al 100% gegeven, ik heb m ook al IN de container gelegd waar header en content in liggen , maar tot dusver weigert ie mee te stretchen naar beneden toe
 
Ja, dat kan kloppen: waarschijnlijk is de menukolom gefloat, en drijf-blokken kunnen niet stretchen. Wat wel kan, is in de body-background een "gordijntje" ophangen: een image met de achtergrondkleur en breedte van het menu, dat je zich verticaal laat herhalen.
  • De header (met haar achtergrondkleur) en het menu (met z'n achtergrondkleur) worden er overheen geplakt (staan verder in de html), daar is er dus niets van te zien.
Oftewel: de zogenaamde "faux column" (nep-kolom) techniek.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
ach so, vandaar mn vruchteloze pogingen...!
ga het morgen even uitproberen maar wederom bedankt uiteraard
 
Ja, doch!
Als je even een img van 500x100px aanmaakt met een kleurtje, kan je het hiermee vlot uitproberen. :)
 
Awel, de "page-creator" was alleen bedoeld om de werking van de faux-column te laten zien. Daar was gans geen rekening gehouden met een #footer die er nog bij moet, laat staan met een #footer die bij korte pagina onderaan het scherm moet komen.

Als de #footer er bij moet, kan je het beste beginnen met wat we al hebben: deze jeels-A.htm.
Hierin de <div id="content"> opsplitsen in:
HTML: 
<div id="middendeel">
   <div id="linkermenu">
      ... 
   </div>
   <div id="content">
      ...
   </div>
   <div class="clearL"><!-- ! --></div>
</div>
Het #middendeel krijgt dan het behangetje van het kleurtje.jpg als background, het #linkermenu float left, en de #content krijgt een margin-left ter waarde van de breedte van het linkermenu. Afsluiten met een clear om de zweefkolom er altijd op te krijgen, en dan zou het gans gepiept moeten zijn.
 
Laatst bewerkt:
content

hmmm, ik dacht echt dat ik dat al gedaan had, hierzo:

Code: 
<div id="kop">
   <div id="binnenkantKop">
      <h1>kop</h1>
   </div>
</div>

<div id="menukolom">
   <div id="binnenkantMenukolom">
      <h2>menu</h2>

      <ul>
         <li>Home</li>
         <li>Item 1</li>
      </ul>
   </div>
</div>

<div id="inhoud">
   <div id="binnenkantInhoud">
      <h2>inhoud</h2>
      <p>hallo hallo</p>

   </div>
</div>

<div class="clearBoth"><!-- ! --></div>
<div>footer</div>

maar blijkbaar mis ik de menu- en contentomvattende div

dan zou het zo beter moeten gaan:
Code: 
<div id="kop">
   <div id="binnenkantKop">
      <h1>kop</h1>
   </div>
</div>

<div id="menuencontent">

<div id="menukolom">
   <div id="binnenkantMenukolom">
      <h2>menu</h2>

      <ul>
         <li>Home</li>
         <li>Item 1</li>
      </ul>
   </div>
</div>

<div id="inhoud">
   <div id="binnenkantInhoud">
      <h2>inhoud</h2>
      <p>hallo hallo</p>

   </div>
</div>
<!-- einde menu en content -->
</div>

<div class="clearBoth"><!-- ! --></div>
<div>footer</div>

of misschien zelfs nog beter om ook de header mee te nemen in die 'containerdiv'.
zoals je al eerder deed met die 100%height
 
Eh, ja, de "allesomvattende container" zou inderdaad alles kunnen omvatten behalve de #footer, maar hij kan hier ook gemist worden!
Als namelijk de #menuencontent aan de onderkant een flinke padding krijgt, zijn we er ook: dan kan wat er in staat nooit onder de #footer verdwijnen.

Wat ook redelijk essentieel is:
HTML: 
<div>footer</div>
... deze zou ik wel de id="footer" meegeven, anders werkt het hele verhaal niet. :P

Met dit alles verwerkt (de "menuencontent" heb ik "middendeel" genoemd):
Ook hierin: Doctype Strict genomen, want Transitional was in 1999 alleen bedoeld om oude sites aan de praat te houden. En alle font-sizes in em i.p.v. px: dan kunnen IE-surfers ook de lettergrootte naar behoefte aanpassen zonder op de hele pagina te hoeven inzoemen (met vervelende L-R scrollbar als consequentie).

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan