Wrapper soll sich 100% der Höhe des Contents anpassen...

Sophie88 · 01.10.2013

Hallo zusammen,

ich hoffe, es kann mir jemand helfen.
Ich habe gerade das Problem, dass ich einen #wrapper habe, der den kompletten #content beinhaltet.
Nun soll sich der Wrapper, der eine weiße Hintergrundfarbe hat, in der Höhe immer 100% dem Content anpassen. Ich habe ihm schon ein height:100% gegeben, aber er hängt immer irgendwo unter dem Menü.

Hier der CSS Code:

Code:

body { 
   margin: 0; 
   padding: 0; 
   background-color: #f4f4f4; 
   font: 14px Arial, Helvetica, sans-serif; 
   color:#5f5f5f; 
   text-rendering: optimizeLegibility; 
   line-height:20px; 
   text-align:justify; 
} 
 
#wrapper { 
   background-color: #ffffff; 
   width:100%; 
   box-shadow:4px 4px 4px rgba(0,0,0,0.1); 
   height: 100% !important; 
   position: relative; 
} 
 
#content { 
   width:900px; 
   margin: 0 auto; 
   padding-top:50px; 
} 
 
#logo {float:left; width:450px; height:95px; position: relative;} 
#aktionslogo {float:left; width:450px; height:95px; text-align:right; position: relative;} 
 
#navigation { background-image:url(../img/bg_menu.png);  background-repeat:no-repeat; z-index:999; width:904px; height:66px;  position: relative; margin-top:114px; color:#ebebeb; padding-top:12px;  padding-left:15px; font-size:14px; line-height:20px;  padding-bottom:20px; position: relative;} 
#menu1 {float:left; width: 173px;} #menu2 {float:left; width: 137px;}  #menu3 {float:left; width: 145px;} #menu4 {float:left; width: 141px;}  #menu5 {float:left; width: 132px;} #menu6 {float:left; } 
 
#submenu { width:230px; float:left; line-height:18px; text-align:left;} 
#text { width:670px; float:left;}

Hier der HTML Code

Code:

<!DOCTYPE HTML> 
<html dir="ltr" lang="de-DE"> 
<head> 
   <meta charset="UTF-8" /> 
   <title>x</title> 
   <link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head> 
 
<body>       
        <div id="wrapper"> 
           <div id="content"> 
               <div id="logo"><img src="img/logo.png" width="296" height="95"></div> 
                
                <div id="aktionslogo"><img src="img/logo_aktion.png" width="185" 
                height="76" alt="aktionslogos"></div> 
                 
                <div id="navigation"> 
                  <div id="menu1"><strong>x</div> 
                    <div id="menu2">x</div> 
                    <div id="menu3">x</div> 
                    <div id="menu4">x</div> 
                    <div id="menu5">x</div> 
                    <div id="menu6">x</div>                 
                </div> 
                 
                                
                <div id="submenu"> 
                    <img src="img/arrow.png" width="6" height="10" alt="arrow"> 
                     x 
                     <br><br> 
                    <img src="img/arrow.png" width="6" height="10" alt="arrow"> 
                    x 
                    <br><br> 
                    <img src="img/arrow.png" width="6" height="10" alt="arrow"> 
                     x 
                </div> 
                 
                <div id="text"> 
                   <h1>x</h1> 
                    x 
               <br><br> 
                   <img src="img/btt_x.png" width="288" height="43"  
                    alt="x"> 
               </div> 
        </div> 
</body> 
 
</html>

Ich hoffe sehr auf Hilfe, vielen Dank schonmal!!

tr4ze · 01.10.2013

AW: Wrapper soll sich 100% der Höhe des Contents anpassen...

In der Navigation <Strong> nicht geschlossen.
Beim Wrapper <div> nicht geschlossen.

Benutzt du keinen Editor mit Syntax-Highlighting

noltehans · 01.10.2013

AW: Wrapper soll sich 100% der Höhe des Contents anpassen...

Hi Sophie88,

Code:

body,html{
  height:100%;
}
body {
   margin: 0;
   padding: 0;
   background-color: #f4f4f4;
   font: 14px Arial, Helvetica, sans-serif;
   color:#5f5f5f;
   text-rendering: optimizeLegibility;
   line-height:20px;
   text-align:justify;
}

#wrapper {
   background-color: red;
   width:100%;

/*  height: 100%;       falls der Wraper den ganzen Bildschirm ausfüllen soll */
}

#content {
   width:900px;
   margin: 0 auto;

   background-color: #00FF00;
  padding-top: 50px;
}

#logo {float:left; width:450px; height:95px; }
#aktionslogo {float:left; width:450px; height:95px; text-align:right; }

#navigation { background-image:url(../img/bg_menu.png);  background-repeat:no-repeat;  width:900px; height:66px;   margin-top:114px; color:#ebebeb; padding-top:12px; font-size:14px; line-height:20px;  padding-bottom:20px;
background-color: #FF00FF;
}
#menu1 {float:left; width: 173px;} #menu2 {float:left; width: 137px;}  #menu3 {float:left; width: 145px;} #menu4 {float:left; width: 141px;}  #menu5 {float:left; width: 132px;} #menu6 {float:left; }

#submenu { width:230px; float:left; line-height:18px; text-align:left; background-color: #CE6767;}
#text { width:670px; float:left;}

.clear{
clear: left;
}

Code:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <title>x</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
        <div id="wrapper">
           <div id="content">
               <div id="logo"><img src="img/logo.png" width="296" height="95" alt="logo"></div>

                <div id="aktionslogo"><img src="img/logo_aktion.png" width="185"
                height="76" alt="aktionslogos"></div>

                <div id="navigation">
                  <div id="menu1">1</div>
                    <div id="menu2">2</div>
                    <div id="menu3">3</div>
                    <div id="menu4">4</div>
                    <div id="menu5">5</div>
                    <div id="menu6">6</div>
                </div>


                <div id="submenu">
                    <img src="img/arrow.png" width="6" height="10" alt="arrow">
                     x
                     <br><br>
                    <img src="img/arrow.png" width="6" height="10" alt="arrow">
                    x
                    <br><br>
                    <img src="img/arrow.png" width="6" height="10" alt="arrow">
                     x
                </div>

                <div id="text">
                   <h1>HALLO</h1>
                    x
               <br><br>
                   <img src="img/btt_x.png" width="288" height="43"
                    alt="x">
               </div>

        </div>
           <div class="clear"></div>
        </div>
</body>

</html>

cythux · 02.10.2013

AW: Wrapper soll sich 100% der Höhe des Contents anpassen...

Zudem würde ich Dir anraten, wenn du schon HTML5 benutzen tust, auch Tags wie <header><nav><menu><section><article><footer>
Und die Bilder mittels CSS einzubauen, statt <img src=""> zu nutzen.

lachender_engel · 02.10.2013

AW: Wrapper soll sich 100% der Höhe des Contents anpassen...

Gib dem #wrapper mal ein min-height:100%.
Ich meine damit habe ich letztens das selbe Problem bei mir gelöst.

Ansonsten psote mal einen Link, wo das alles online ist. ist dann leichter selber zu testen.

Basark · 03.10.2013

AW: Wrapper soll sich 100% der Höhe des Contents anpassen...

Das Problem ist der gefloatete div#text.

Wenn ein Element gefloatet wird, wird es aus dem normalen Fluss gelöst und sperrt ein nicht floatendes Elternelement nicht mehr auf. Stichwort: Clearfix

Siehe z.B.: http://www.webtoolkit.info/css-clearfix.html
Ne verständliche deutsche Erklärung des Clearfix findest Du hier: http://little-boxes.de/lb1/14.9.1-teil-1-der-kern-von-clearfix.html

Der Ansatz von Noltehans funtkioniert auch, erfordert aber zusätzliches Markup und ist daher eher unschön. Die anderen Kommentare kannst Du getrost als Klugscheisserei und Schwachsinn (min-height ... lol) abhaken.