[CSS] Div&#039;s vallen buiten de main div met height 100%

De Parasitaire Capaciteit!

Height wordt door IE geïnterpreteerd als min-height, wat dus NIET volgens de standaard is. Firefox interpreteert dat wel volgens de standaard. Verder wordt min-height ook niet ondersteund door IE...

http://www.google.nl/sear...t+in+IE&btnG=Zoeken&meta=

donderdag 7 april 2005 21:06

Acties:

coubertin119

Cascading Stylesheet:

1	overflow: auto;

Uit het blote hoofd moet dit de oplossing zijn.
Tuurlijk niet, dat is voor scrollbars...

Je moet dus zoals Sappie zegt (en ik hieronder ook al) met min-height aan de slag

.

Height zoals je gewend bent van in Internet Explorer vertoont fout gedrag, de wijze waarop IE het rendert is namelijk die van min-height. Maar zo zou het moeten werken

.

_{Divjes zijn geen god, semantiek daarentegen wel. En vergeten we de[code]-tag niet voor codesnippets?}

[ Voor 16% gewijzigd door coubertin119 op 07-04-2005 21:08 ]

Skat! Skat! Skat!

donderdag 7 april 2005 21:18

Acties:

donderdag 7 april 2005 21:19

Topicstarter

Sappie schreef op donderdag 07 april 2005 @ 21:06:
Height wordt door IE geïnterpreteerd als min-height, wat dus NIET volgens de standaard is. Firefox interpreteert dat wel volgens de standaard. Verder wordt min-height ook niet ondersteund door IE...

http://www.google.nl/sear...t+in+IE&btnG=Zoeken&meta=

Dus als ik er min-height van maak, dan doetie het in Firefox wel goed, maar in IE niet??

en moetik dan gewoon bij mun container, in plaats van

height: 100%;

er

min-height: 100%;

van maken?

Ennuh coubertin, ik zag geen code knopje, dus vandaar dattik die tag niet gebruikte... vond het al zo vreemd dat die er niet was

[ Voor 12% gewijzigd door Eswip op 07-04-2005 21:19 ]

Acties:

De Parasitaire Capaciteit!

om mezelf maar ff te quoten (en dan vooral het onderste gedeelte over min-height): [rml]Sappie in "[ CSS/XHTML] div height 100%"[/rml]

verder is google je grootste vriend

[ Voor 19% gewijzigd door Sappie op 07-04-2005 21:20 ]

donderdag 7 april 2005 21:23

Acties:

donderdag 7 april 2005 21:24

Topicstarter

Ik heb mun container cell nu de volgende 2 waarden gegeven

code:

1 2	min-height: 100%; _height: 100%;

Echter zorgt dit in FF er alleen maar voor dat alles links word gealliged, en niet meer in het midden..

Acties:

coubertin119

Eswip schreef op donderdag 07 april 2005 @ 21:18:
[...]Ennuh coubertin119, ik zag geen code knopje, dus vandaar dattik die tag niet gebruikte... vond het al zo vreemd dat die er niet was

offtopic:
Overzicht van UBB-codes ende veel leesplezier

Met dat gegeven moet je een beetje aan het testen gaan, Internet Explorer-only selector erbij en je bent klaar. Wie weet lukt het zelfs zonder zo'n semi-hack maar dat laat ik aan jou (of Google) over

.

Skat! Skat! Skat!

donderdag 7 april 2005 21:26

Acties:

donderdag 7 april 2005 21:39

Topicstarter

ik zie via google ook wel sites staat dattik gewoon min-height: 100%; oid moet gebruiken, maar dat werkt gewoon niet... net alsof hij dat niet kent...

edit:
Als ik met pixels doe, dus min-height: 800px; dan doetie het wel... maar warom dan niet met percentage, volgens de eerste google-hit moet dat ook kunnen... alhoewel ze het daar wel over css2 hebben :x geen idee hoe dat zit, ben nog niet zolang in het css gebeuren

[ Voor 49% gewijzigd door Eswip op 07-04-2005 21:29 ]

Acties:

De Parasitaire Capaciteit!

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>zooi</title>
    <style type="text/css">
        html, body { margin: 0; padding: 0; height: 100%; text-align: center;}
        
    </style>
  </head>
  <body>
    <div style="min-height: 100%; _height: 100%; width: 500px; background: red; margin: 0 auto;">
        <!-- margin collapsing.. vandaar de margin op de h1 -->
        <h1 style="margin: 0;">gfdgfdgfdgf</h1>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>
        <p>gfdgfdgfdgf</p>      
    </div>
  </body>
</html>

simpel voorbeeldje.. wel met inline css, maar dat kun je zelf wel verbeteren

[ Voor 26% gewijzigd door Sappie op 07-04-2005 21:40 ]

donderdag 7 april 2005 21:45

Acties:

donderdag 7 april 2005 21:57

Topicstarter

wooot, het werkt, thnx alot!

Alleen nog 1 klein dingetje, ja ik ben vervelend...

In FF maakt hij de cell alleen net iets te groot, waardoor je een klein stukje kan scrollen. Zal wss aan de margin liggen van de body.. in IE issie echter wel perfect.

Is hier ook nog een oplossing voor?

Acties:

Rowanov

Kop eens wat anders...

Wat je misschien beter kan doen is een clear: both; op je footer ding gooien, dan ben je ook van de problemen af.

donderdag 7 april 2005 22:01

Acties:

De Parasitaire Capaciteit!

Rowanov schreef op donderdag 07 april 2005 @ 21:57:
Wat je misschien beter kan doen is een clear: both; op je footer ding gooien, dan ben je ook van de problemen af.

want? hij maakt geen gebruik van floated elements..

donderdag 7 april 2005 23:02

Acties: