XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   div Container nimmt automatisch die Höhe des Eltern-div an (http://xhtmlforum.de/showthread.php?t=39536)

fidelio 10.04.2006 21:18

div Container nimmt automatisch die Höhe des Eltern-div an
 
Hallöchen
ich probiere nun schon ewig rum, folgendes Layout mithilfe von div-Containern zu realisieren. Mein Ziel ist es, einen Banner mit fixer Höhe und 100% Breite über einem weiteren div-Container zu erhalten. Dieser weitere div-Container soll wiederum vier weitere Elemente beherbergen, die sich in der Höhe dem umfassenden div-Container anpassen sollen.
In etwa wie:

------------------------
####Banner#####
links/---Total----/rechts
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/#footer#-/-----
------------------------

Also der Banner sollte sich übers gesamte Browserfenster erstrecken. Der linke div-Container sollte "automatisch" die Höhe des übergeordneten Containers aufweise, so wie der rechte div-Container. Der Total-Container sollte schliesslich den Inhalt beherbergen.
Der footer-Container soll unterhalb des Inhalt-Containers zu liegen kommen und dieselbe Breite wie der Inhalts-Container aufweisen.
Ich probierte grundsätzlich in etwa wie folgt:

....
<body>
<div id="banner>
</div>
<div id="total">
<div id="links">
</div>
<div id="inhalt">
<div id="footer">
</div>
</div>
<div id="rechts">
</div>
</div>
....
Das stylesheet beherbergt nun folgende Definitionen:

body {margin: 0%;
padding: 0%;
border: 0px;
}
#total {position: absolute;
top: 110px;
left: 0px;
height: auto;
width: 100%;
margin: 0%;
padding: 0%;
}
#banner {position: absolute;
top: 0px;
left: 0px;
height: 110px;
width: 100%;
margin: 0%;
padding: 0%;
}
#links {position: absolute;
top: 0px;
left: 0px;
width: 10%;
height: inherit;
margin: 0%;
padding: 0%;
background-color: blue;
}
#rechts {position: absolute;
top: 0px;
right: 0px;
width: 10%;
height: inherit;
margin: 0%;
padding: 0%;
background-color: blue;
}
#footer {position: absolute;
bottom: 50px;
left: 0%;
width: 100%;
height: 50px;
margin: 0%;
padding: 0%;
background-color: blue;
}
#inhalt {position: absolute;
top: 0px;
left: 10%;
width: 80%;
height: auto;
margin: 0%;
padding: 0%;
}

Das Problem ist nun, dass die Höhe der div-Blöcke links und rechts mit den Eigenschaften inherit lediglich die Eigenschaft auto erben, nicht aber die tatsächliche Höhe des Elternelementes annehmen...
Ich weiss nicht, was ich noch probieren könnte.... mit relativen Positions-Angaben kommts in etwa gleich raus...
Weiss jemand Rat?..
Grüsse
fidelio

andir 10.04.2006 21:40

Du willst also, dass die Container immer 100% Höhe haben?

Schau mal hier rein:

http://www.xhtmlforum.de/viewtopic.php?p=55252#55252

Für den footer benutze die Forensuche mit dem Begriff "footer stick alt" .
Wenn Du etwas fauler bist oder einfach nur zum Lernen, klick den Link in meiner Sig. :) ( da funktioniert 100% Höhe aber noch nicht besonders gut)

grüsse

fidelio 10.04.2006 23:22

Danke! Werd ich gerne ausprobieren! Ich frage mich bloss, weshalb dies so schwierig ist und weshalb dies mit css nicht einfacher machbar ist, schliesslich ist css doch genau für solche sachen da!?
Danke!!!

fidelio 12.04.2006 16:34

Ups! Wer hätte da gedacht, dass ich aufgrund dieses Problems soviel über css gelernt hab... :oops:
faux columns bauen also auf ineinander verschachtelten div-Containern auf, die mittels Hintergrundbild erreichen, dass Sie, unabhängig vom eigenen Inhalt, auf die Gesamthöhe des höchsten Kindselements gestreckt werden.... (Korrektur willkommen!) Hat mich eine rechte Weile gekostet, dies zu verstehen! Also nie wieder div-Container absolut oder irgendwie anders positionieren!... Bloss noch mittels float-Werten umfliessen lassen, mittes margin-Werten positionieren und mittels width-Werten dimensionieren (Korrekturen sehr willkommen!)...
Gemäss Zoe Gillenwater (http://www.communitymx.com/content/a...ge=3&cid=AFC58)
benötige ich hierfür jedoch noch die Klasse clearfix unter "Fixes" im css-stylesheet:
Code:

body {
        margin: 0;
        padding: 0;
        }

#wrapper1        {
        background: url(links_bg.png) repeat-y 15% 0;
        }
#wrapper2        {
        background: url(rechts_bg.png) repeat-y 85% 0;
        }
#wraprechts {
        float: right;
        width:85%;
        }
#banner {
        background: #fa882f
        }
#inhalt {
        float: left;
        width: 82%;
        }
#rechts {
        margin-left: 83%;
        }
#links {
        margin-right: 85%;
        }
#footer {
        background: #fa882f;
        }

/*        Fixes...
*/
.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block;
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/*        Ende Fixes
*/

... damit die div-Elemente "links" und "rechts" in folgendem html-Text angezeigt werden:
Code:

        <body>
                <div id="wrapper1" class="clearfix">
                        <div id="wrapper2" class="clearfix">
                                <div id="banner">Banner</div>
                                <div id="wraprechts">       
                                        <div id="inhalt">Inhalt </div>
                                        <div id="rechts">Rechts</div>
                                </div>
                                <div id="links">Links</div>
                        </div>
                <div id="footer">Footer</div>
                </div>
        </body>

Kann mir jemand kurz erläutern, was diese "Fixes" genau machen?...


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:02 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023