✔ 100% Height Wrapper

dobber812 · 21. September 2009

Hy,

ich habe mal wieder ein Problem mit einem Wrapper und height:100%....

Der "mainContent" soll sich dem "content" immer mit 100% anpassen aber er macht es nicht...

was mache ich da nur Falch, ich finde die Lösung einfach nicht ...

LG

Code:

body  {
height: 100%;
 }

#container {
width: 910px; 
 } 

#mainContent {
width: 908px;
 min-height: 100%;
 height: auto !important;
height: 100%;
margin: 0 auto; 
 } 

#content 
{	
    }

Maik · 21. September 2009

dobber812 hat gesagt.:
Der "mainContent" soll sich dem "content" immer mit 100% anpassen aber er macht es nicht...

Der Satz soll wohl anders herum lauten, nur ist dies technisch möglich, denn der einzige Block, der im Viewport unabhängig von seinem Inhalt eine 100%-Mindesthöhe einnimmt, ist #mainContent.

mfg Maik

dobber812 · 21. September 2009

hmm gut das wusste ich auch noch nicht

Wie darf ich das nun genau verstehen, müsste ich die Divs dann theoretisch "tauschen" bzw. die Bezeichnung ?!

... so funktioniert es irgendwie auch nicht ...

Maik · 21. September 2009

Schwer zu sagen, wie's bei dir funktioniert, denn ich kenne deinen HTML-Code und die möglicherweise weiteren CSS-Formatierungen nicht.

Hast du dazu schon mein Tutorial CSS-Layout mit 100%-Höhe gelesen, und die angehängten Beispiele studiert?

mfg Maik

dobber812 · 21. September 2009

Also ich musste noch zusätzlich ein clearfloat einfügen, war ja im css nicht zu erkennen

Besten Dank

Maik · 21. September 2009

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an? ;-)

Aber dieser Sachverhalt war deinem CSS-Snippet nun wirklich nicht zu entnehmen

Merke: Das nächste mal den vollständigen Code posten - dann klappt's auch mit der Hilfestellung

mfg Maik

MontyBurns · 22. September 2009

Ähnliches Problem

Hallo allerseits,

ich habe ein ähnliches Problem.
Bei mir drückt zwar der Content die boxen so auf, wie er soll .. aber links und rechts die grünen divs (shadow-left und shadow-right) bleiben jeweils auf der Höhe eines nbsp's hängen.

Hab das mit dem min-height und height auf 100% setzen getestet und es schlägt dummerweise genauso fehl, wie mein bisheriges herumspielen mit diesem Problem.

Hat da noch jemand nen Trick im Ärmel?

HTML:

<?xml version="1.0"?>                                                                                                                                                       
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Deschdomaaadich</title>
        <style type="text/css">
<!--
*
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

div#page
{
    background-color:#999999;
    width:1000px;
}

div#header
{
    background-color:#aaaaaa;
}

div#header div#shadow_left
{
    background-color:#00ff00;
    float:left;
    height:auto !important;
    min-height:100%;
    height:100%;
    width:30px;
}

div#header div#menu_meta
{
    background-color:#cccccc;
    float:left;
    padding-left:700px;
}

div#header div#menu_meta ul
{
    list-style-type:none;
    list-style-position:inside;
}
div#header div#menu_meta ul li
{
    display:inline;
    float:left;
    width:80px;
}

div#header div#menu_meta ul li a
{
    display:block;
    padding:5px 0px 5px 0px;
    text-align:center;
}

div#header div#shadow_right
{
    background-color:#00ff00;
    float:left;
    height:auto !important;
    min-height:100%;
    height:100%;
    width:30px;
}

div#pagebrand
{
    background-color:#888888;
    height:200px;
}

div#wrapper
{
    background-color:#ff00ff;
}

div#navi div#shadow_left
{
    background-color:#00ff00;
    float:left;
    height:auto !important;
    min-height:100%;
    height:100%;
    width:30px;
}
div#navi div#menu_main
{
    background-color:#dddddd;
    float:left;
    width:940px;
}

div#navi div#menu_main ul
{
    list-style-type:none;
    list-style-position:inside;
}

div#navi div#menu_main ul li
{
    display:inline;
    float:left;
    width:188px;
}

div#navi div#menu_main ul li a
{
    display:block;
    text-align:center;
}

div#navi div#shadow_right
{
    background-color:#00ff00;
    float:left;
    height:auto !important;
    min-height:100%;
    height:100%;
    width:30px;
}

div#main
{
    width:1000px;
}
div#main div#shadow_left
{
    background-color:#00ff00;
    float:left;
    height:auto !important;
    min-height:100%;
    height:100%;
    width:30px;
}

div#main div#content
{
    background-color:#eeeeee;
    float:left;
    width:740px;
}

div#main div#sidebar
{
    background-color:#cccccc;
    float:left;
    width:200px;
}

div#main div#shadow_right
{
    background-color:#00ff00;
    float:left;
    height:auto !important;
    min-height:100%;
    height:100%;
    width:30px;
}

div.clear
{
    clear:both;
}
-->
        </style>
    </head>
    <body>                                                                                                                                                                  
        <div id="page">
            <div id="header">
                <div id="shadow_left">&nbsp;</div>
                <div id="menu_meta">
                    <ul>
                        <li><a href="./">Test1</a></li>
                        <li><a href="./">Test2</a></li>
                        <li><a href="./">Test3</a></li>
                    </ul>
<!--
                    <div class="clear"></div>
-->
                </div>
                <div id="shadow_right">&nbsp;</div>
                <div class="clear"></div>
            </div>
            <div id="pagebrand"></div>
            <div id="wrapper">
                <div id="navi">
                    <div id="shadow_left">&nbsp;</div>
                    <div id="menu_main">
                        <ul>
                            <li><a href="./">Test1</a></li>
                            <li><a href="./">Test2</a></li>
                            <li><a href="./">Test3</a></li>
                            <li><a href="./">Test4</a></li>
                            <li><a href="./">Test5</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div id="shadow_right">&nbsp;</div>
                </div>
                <div id="main">
                    <div id="shadow_left">&nbsp;</div>
                    <div id="content">
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Die Seite soll so lang werden k&ouml;nnen, wie sie will.
                    </div>
                    <div id="sidebar">
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Lorem ipsum und sonstiges geseieher.<br />
    Die Seite soll so lang werden k&ouml;nnen, wie sie will.
                    </div>
                    <div id="shadow_right">&nbsp;</div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Grüße

Monty

Maik · 22. September 2009

Hi,

die äußeren Blöcke reagieren in deinem "Konstrukt" nicht auf die Höhenskalierung des mittleren Blocks, wenn sein Inhalt zunimmt, sondern verharren in der Höhe, die ihr Inhalt (ein geschütztes Leerzeichen) von ihnen abverlangt.

Der Artikel AnyColumnLongest hilft dir da weiter, um ein Layout mit sog. "Equal-Height-Columns" zu entwickeln.

Bei einem Layout mit fixen Breiten bietet sich die Faux-Columns-Technik an, die ich in meinem hier schon erwähnten CSS-Tutorial CSS-Layout mit 100%-Höhe angewendet habe.

Hierbei agiert eine Grafik als Hintergrundbild im Elternelement, die die einzelnen Spaltenhintergründe erzeugt. Bei dir sind das jeweils die umschliessenden Blöcke header, navi, main.

mfg Maik

✔ 100% Height Wrapper

dobber812

Mitglied

Maik

dobber812

Mitglied

Maik

dobber812

Mitglied

Maik

MontyBurns

Mitglied

Maik

Neue Beiträge