mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 15:28 Benutzername: Passwort: Auto-Login

Thema: verschachtelete divs mit 100% Höhe vom 22.08.2008

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> verschachtelete divs mit 100% Höhe
Autor Nachricht
tahrqa
Threadersteller

Dabei seit: 18.11.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 22.08.2008 14:13
Titel

verschachtelete divs mit 100% Höhe

Antworten mit Zitat Zum Seitenanfang

Hallo,

ich bin auf der Suche nach einer Lösung für folgendes Problem:
Ich habe zwei div Container, die ineinander verschachtelt sind. Nun soll jeder dieser Container 100% Höhe des Browserfensters ausfüllen.
Warum will ich das so haben?
Der eine Div-Container soll ein Hintergrundbild enthalten, das am Unteren Ende positioniert ist. Container Nr 2 soll ein Hintergrundbild haben, das sich auf der y-Achse wiederholt, je nach Höhe des Containers.

Ich habe schon herumprobiert, komme aber zu keinen Ergebnis.
Der folgende Code macht das schon ganz gut. Nur wenn der Container mehr Text enthält, sodass man scrollen muss funktioniert es nicht mehr. Ich habe den inneren Container dazu mal etwas schmaler gemacht, dann sieht man den Fehler besser (orange wird nicht länger).


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">
<head>
<style>
/* mac hide\*/
html, body {height:100%}
/* end hide */

body {
    padding:0;
    margin:0;
    min-width:870px;/* for mozilla*/
    background-color: #f4f4f4;
    color: #000000;
}

#outer_wrapper{
    height:100%;
    min-height:100%;
    width:870px;
    margin:auto;
    position:relative;
    background-color:#f90;
}

html>body #outer_wrapper{height:auto;} /*for mozilla as IE treats height as min-height anyway*/

#outer{
    height:100%;
    min-height:100%;
    width:860px;
    color: #000000;
    text-align:left;
    position: absolute;
    background-color:#00F;
    font-family: verdana, aria sans-serif;
    font-size: 12px;
}

html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/

</style>
</head>

<body>
<div id="outer_wrapper">
  <div id="outer">
  123
  </div>
  <!-- end outer div -->
</div>
<!-- end outer_wrapper div -->
</body>
</html>
  View user's profile Private Nachricht senden
Ähnliche Themen Höhe von 2 DIVs angleichen - wie?
gleiche höhe für divs?
Höhe definieren eines divs
CSS problem mit floatenden DIVS und der Höhe
3 Divs nebeneinander im Container auf einer Höhe?
Höhe eines divs mit javascript bestimmen.
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.