2 div´s = 100%; 1div höhe in px - 2div den Rest

Hallo…
ich habe 2 div´s…
… das erste hat die Höhenangabe in px
… das zweite soll den Rest einnehmen
beide div´s zusammen sollen 100% ergeben…
habe html und body auf height:100% gesetzt… mein zweites div auch, nun nimmt es nicht den übrigen platz ein sondern wird auch 100% hoch…
gibt es eine Möglichkeit das es nur den Rest einnimmt?

Danke …
mfg
Melli

Ja geht mit der option margin:0 auto; im html tag

hier ein Beispiel:

html{height:100%;
margin:0 auto;}

body{height:100%;}/* für keine Ränder an den Seiten auch hier die option //// margin:0 auto ///// einfügen*/

#div1{height:200px;
background-color:#FFFFCC;}

lg
aya

#div2{background-color:#66FFFF;
height:100%;
}

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Hallo Aya,

ich habe 2 div´s…
… das erste hat die Höhenangabe in px
… das zweite soll den Rest einnehmen
beide div´s zusammen sollen 100% ergeben…

hier ein Beispiel:

html{height:100%;
margin:0 auto;}

#div1{height:200px;
background-color:#FFFFCC;}

#div2{background-color:#66FFFF;
height:100%;
}

Etwas an deiner Rechnung kann nicht stimmen, denn 100% von 100% + 200 Pixel sind nicht 100% - 200 Pixel.

Alternativ empfehle ich diesen Ansatz;
http://aktuell.de.selfhtml.org/artikel/css/footer/in…
fürchte aber, dass der auch nur was für den nicht-css-kompatiblen IE-Quirks-Modus ist.

Gruß Gernot

Hallo Gernot

ja rein mathematisch gesehen hast du recht, aber CSS ist GENIAL - da geht so was.

Ne spass beiseite, das erste div is klar, damit das zweite div aber den restlichen Platz ausfüllt bekommt es 100% height, und damit sich das Div eben über den REst der Seite aufbläst die option margin:0 auto;
was in dem Fall heisst: das das zweite Div einfach 100% des ihm zur Verfügung stehenden Platzes nutzt.
Und nachdem keine positionierungs werte angegeben sind, wird einfach div an div gereiht.

lg
aya

Hallo Aya,

ja rein mathematisch gesehen hast du recht, aber CSS ist
GENIAL - da geht so was.

Nö, ich weiß natürlich nicht, welchen DOCTYPE du verwendest, aber wenn ich css-kompatibles
einstelle, erhalte ich immer noch einen vertikalen Scrollbalken, weil
#div1 ( height:200px; }
plus
#div2( height:100%; }

natürlich mehr sind als 100% des Viewports. Auch wenn ich den DOCTYPE weglasse, wir uns also im Bereich des nicht-css-kompatiblen Quirks-Modus befinden, ist das so!

Oder reden wir aneinander vorbei?

Gruß Gernot

vielen Danke…

aber leide hat das nicht geklappt :frowning:

Hallo

also bei mir funktioniert es sowohl im IE als auch im FF

am besten hier reingucken, vl ist ja ein Tippfehler oder ähnliches passiert

http://www.acamay.org/temp/divTest.html

lg
aya

Hallo Aya,

also bei mir funktioniert es sowohl im IE als auch im FF

am besten hier reingucken, vl ist ja ein Tippfehler oder
ähnliches passiert

http://www.acamay.org/temp/divTest.html

Ja das ist überall der gleiche Befund wie bei den Testseiten, die ich vorher schon mit deinem Code gebaut hatte; alles andere widerspräche ja auch jeder Logik:

Man kann in jedem Browser um genau die 200 Pixel nach unten scrollen, die du zusätzlich zu den 100% Höhe des unteren DIV-Elements beim oberen vorausschickst.

Was der Fragesteller aber, so wie ich ihn verstehe, möchte, ist eine Seite, die nicht mehr als 100% des Browserfensters ausfüllt sind und bei der man nicht die ganze Seite scrollt, sondern allenfalls den unteren Teil, der natürlich nicht 100% der Höhe der Seite einnehmen darf, sondern nur 100% minus 200 Pixel! Das könnte man im IE z.B. über expression() erreichen und dort wie in den anderen Browsern würde es ohne solch invalides CSS auch nur mit aktiviertem JavaScript funktionieren.

Gruß Gernot

1 Like

Hallo…

Je nachdem wofür du die divs brauchst - könntest du nicht das erste div in das zweite setzen?

Cheers, Felix