nicht angemeldet
100% Höhe für 2. div ?
Ich habe eine Frage zu DIV-Höhen mit CSS:
Ein Layout, bestehend aus zwei untereinander liegenden
DIVs, wobei der obere eine feste Höhe und der untere
immer bis zum unteren Browserrand gehen soll, ist leider
nicht möglich, oder?
Was zum Beispiel mit folgender Konstruktion problemlos
läuft funktioniert mit derzeitigem CSS überhaupt nicht:
<table height="100%">
<tr>
<td height="80">INHALT</td>
<tr>
<tr>
<td height="100%">MEHR INHALT</td>
</tr>
</table>
Bei der Umstellung zu DIV wird die Höhenangabe 100%
absolut und einmalig ermittelt und angezeigt:
<div style="height:80px">
INHALT
</div>
<div style="height:100%">
MEHR INHALT
</div>
Der zweite DIV-Bereich ist so hoch wie das aktuelle
Browserfenster PLUS 80 Pixel(!)
Gibt es eine andere Konstruktion, die mit Hilfe
vin DIVs die obrige TABLE-Konstruktion ersetzt?
Danke für kompetente Hilfe
-
Hi,
Der zweite DIV-Bereich ist so hoch wie das aktuelle
Browserfenster PLUS 80 Pixel(!)ich weis nicht ob das valid ist oder gar funktioniert aber mach doch 100%-80px. probiers einfach ma aus
MfG
-
Hi,
Der zweite DIV-Bereich ist so hoch wie das aktuelle
Browserfenster PLUS 80 Pixel(!)ich weis nicht ob das valid ist oder gar funktioniert aber mach doch 100%-80px. probiers einfach ma aus
Ich erbat doch um KOMPETENTE Antworten.
Nein, diese Angabe ist nicht erlaubt und
es funktioniert auch nicht.Das Problem liegt an der Ermittlung der 100%.
Diese orientieren sich am Elternelement und
nicht am Inhalt des Elementes.-
Hi,
frag doch mit screen.with und screen.height die auflösung des users ab und setze die größe der div's dynamisch.
Gruß Uli
-
Hi,
frag doch mit screen.with und screen.height die auflösung des users ab und setze die größe der div's dynamisch.
Dabei übersihst du die Möglichkeit, dass der Inhalt des zweiten
DIV-Bereich größer sein kann als das Browserfenster.Und damit läuft der Inhalt darüberhinaus.
-
-
-
-
Hallo,
<div style="height:80px">
INHALT
</div>
<div style="height:100%">
MEHR INHALT
</div>
Der zweite DIV-Bereich ist so hoch wie das aktuelle
Browserfenster PLUS 80 Pixel(!)Wenn das erste DIV sich nicht im normalen Elementfluss befindet (position:absolute; top:0; left:0; height:80px;), dann fängt das zweite DIV wieder oben[1] an. Dieses könnte dann mit margin:80px Platz für das erste DIV lassen.
[1] Oben ist natürlich unter Beachtung von marin und padding der umgebenden Elemente (HTML und BODY z.B.) zu betrachten. Die height:100% im zweiten DIV beziehen sich natürlich auch auf die Höhe der umgebenden Elemente (HTML und BODY z.B.), welche auch eine Höhe zugewiesen bekommen sollten.
viele Grüße
Axel
-
Wenn das erste DIV sich nicht im normalen Elementfluss befindet (position:absolute; top:0; left:0; height:80px;), dann fängt das zweite DIV wieder oben[1] an. Dieses könnte dann mit margin:80px Platz für das erste DIV lassen.
So ist es, aber die 80px werden dennoch unten angehängt.
[1] Oben ist natürlich unter Beachtung von marin und padding der umgebenden Elemente (HTML und BODY z.B.) zu betrachten. Die height:100% im zweiten DIV beziehen sich natürlich auch auf die Höhe der umgebenden Elemente (HTML und BODY z.B.), welche auch eine Höhe zugewiesen bekommen sollten.
Dem ist auch so.
Mein Beispiel nach deinen Vorgaben wäre dann:
<div style="position:absolute;top:0px;left:0px;height:80px;width:100%;margin:0px;padding:0px;background-color:#bbbbbb;">
INHALT
</div>
<div style="position:absolute;top:0px;left:0px;height:100%;width:100%;margin:0px;margin-top:80px;padding:0px;background-color:#eeeeee;">
MEHR INHALT
</div>Aber, wie gesagt, auch hier die zu große Darstellung.
Danke
-
Hallo,
So ist es, aber die 80px werden dennoch unten angehängt.
Ja, ich vergaß, dass margin und padding _außerhalb_ der height liegen. Dann braucht es leider noch ein zusätzlichens Element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>[Titel]</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
html, body {margin:0; padding:0; height:100%;}
-->
</style>
</head>
<body>
<div style="position:absolute; top:0; left:0; height:80px; width:100%; background-color:#003031">
<p style="color:#FFF; margin:0;">Oben</p>
</div>
<div style="height:100%; background-color:#00AEAD">
<div style="padding-top:80px;">
<p style="margin:0;">Unten</p>
</div>
</div>
</body>
</html>Allerdings könnte man einfach auch das BODY-Element als Hintergrund für den unteren Bereich gebrauchen und so ein DIV (das mit height:100%) einsparen.
viele Grüße
Axel
-
Gleiches Problem :(
Ich denke mal, dass das mit CSS gar nicht geht.
Die Anweisung "height:100%" bezieht sich auf das
Elternelement und wird in diesem Falle etwas zu
penibel interpretiert.Danke noch mal
-
Hi,
Ich denke mal, dass das mit CSS gar nicht geht.
natürlich geht es. Du kannst einem Element height:100% und padding-bottom:80px zuweisen und ein weiteres mit height:80px absolut bottom:0 positionieren.
freundliche Grüße
Ingo-
Hallo,
natürlich geht es. Du kannst einem Element height:100% und padding-bottom:80px zuweisen und ein weiteres mit height:80px absolut bottom:0 positionieren.
Nein, _so_ geht es nicht. Erstens sollte das 80px-Element _oben_ sein und wenn ein Element eine Content-height von 100% hat, kommen padding, border und margin _hinzu_, so dass es insgesamt _mehr_ als 100% Höhe einnimmt, wenn nicht alle diese Eigenschaften 0 sind.
Es geht so, wie ich es gezeigt habe. In einem Element mit 100% Höhe befindet sich ein Element mit padding-top:80px, welches den Inhalt enthält. Den Platz des padding-top kann nun ein absolut positioniertes Element einnemen.
viele Grüße
Axel
-
-
-
-
-