Grössenproblem zweier Divs

**BigSanch** · 06-07-2009, 12:06

Hi

Ich habe schon einiges gelesen und gefunden, zu dem Problem, aber die Lösungen oder Vorschläge beziehen sich auf nebeneinander liegende Div's und ähnliches, was ich versucht habe um zu setzen, aber nicht gefuntzt hat.

Folgendes Problem:

Ich habe ein Div (home), welches das Hintergrundbild der Seite zeigt:

Code:

 #home   { position:absolute; width:100%; height:100%-180px; top:180px; z-index:4; min-height:610px; min-width:956px; }

In diesem Div, wird eine Seite geladen, welche mit Tabelle das gesamte Bild aufgeteilt, je nach Auflösung, die Tabelle vergrössert oder verkleinert, bis auf min-hight/wide, somit ist das Bild so gross wie das Fenster

Ich habe ein zweites Div (page), welches über dem #home liegt und den gesamten Text enthält:

Code:

 #page   { position:relative; width:95%; height:95%-210px; top:210px; z-index:900; overflow:auto; }

In diesem Div werden (über das Menü) die Seiten inhalte geladen.

Wenn ich nun aber einen Text habe, der sehr lange ist, wird das Div #page dementsprechend hoch. Das Div #home aber bleibt bei der Grösse des Fensters.

Wie kann ich es erreichen, dass sich das #home Div, der Grösse des #page Div's anpasst?

MfG und Danke für die Antworten

**anna55** · 06-07-2009, 14:04

Gib mal Deinem Div #home noch ein

PHP-Code:


overflow:hidden;

und dem Div #page einen Abstand nach unten, damit der gesamte Inhalt sichtbar ist

PHP-Code:


margin-bottom:210px;

Edit: Deine height-Eigenschaften haben zu viele Werte, schreib entweder eine Längen- oder eine Prozentangabe. CSS lässt sich hier überprüfen:
http://jigsaw.w3.org/css-validator/#validate-by-input

**BigSanch** · 06-07-2009, 21:37

Hi

Danke Anna für deine Antwort, aber ich weiss nicht genau, ob ich es richtig erklärt habe, aber deine Lösung bringt mich nicht weiter, denn folgender Massen:

Gib mal Deinem Div #home noch ein overflow:hidden;

Genau das ist das Problem, dieses Div will ich dynamisch vergrössern lassen zum andren Div. Das andre Div ist di Grössenvorgabe.

und dem Div #page einen Abstand nach unten, damit der gesamte Inhalt sichtbar ist margin-bottom:210px;

Brauch ich nicht, da ich die Höhen Angabe mit 95% "- dem Abstand den ich per 'top' nach unten setze " schon sage, dass er um das versetzte auch vergrössern soll, was auch gut funtzt, denn jeglicher Text, egal wie gross wird komplett angezeigt, nur das #home Div sollte sich diesem anpassen

Ausser ich hab nun was net gechecked, glaub ich so nicht weiter zu kommen

Ich hab durch googlen einen Ansatz gefunden, wo ich per Java die Grösse einis Divs auslesen kann, was ich auch schon wusste, aber wenn ich das anwende, verändert sich das komplette Verhalten, der andren Divs, die auf der Seite sind

**anna55** · 07-07-2009, 00:04

Zitat von BigSanch

..aber ich weiss nicht genau, ob ich es richtig erklärt habe..

Du hast Dein Anliegen schon richtig erklärt. Mein Ansatz war dieser hier:

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title>Höhe</title>

<style type="text/css">

#home {

    position:absolute;

    width:100%;

    height:100%-180px;

    top:180px;

    z-index:4;

    min-height:610px;

    min-width:956px;

    overflow:hidden;

    background:black;

}

#page {

    position:relative;

    width:95%;

    height:95%;

    top:210px;

    z-index:900;

    overflow:auto;

    margin-bottom:210px;

    background:green;

}

</style>

</head>

<body>

<div id="home">

    <div id="page">Hier der Pagetext<br />Hier der Pagetext<br />

    Hier der Pagetext<br />Hier der Pagetext<br />Hier der Pagetext<br />

    Hier der Pagetext<br />Hier der Pagetext<br />Hier der Pagetext<br />

    Hier der Pagetext<br />Hier der Pagetext<br />Hier der Pagetext<br />

    Hier der Pagetext<br />Hier der Pagetext<br />Hier der Pagetext<br />

    Hier der Pagetext<br />Hier der Pagetext<br />Hier der Pagetext<br />

    Hier der Pagetext<br />Hier der Pagetext<br />Hier der Pagetext<br />

    Hier der Pagetext<br />Hier der Pagetext<br />Hier der untere Pagetext<br />

    </div>

</div>

</body>

</html>

Ich habe die Hintergrundfarben der besseren Übersichtlichkeit halber eingebaut. Durch overflow:hidden für den Div home passt sich dieser der variablen Höhe des Divs page an. Wenn Du nun die margin-Angabe weglässt, dann fehlt durch Deine - nicht validen - doppelten width-Werte der von mir im Beispiel als unterer Pagetext bezeichnete Text.