nicht angemeldet
Guten Morgen!
Ich verzweifel gerade an einem Standard-Layout.
Und zwar soll sich der Kontainer mit dem Inhalt immer bis zum unteren Bildschirmrand ausdehnen, auch wenn der Inhalt weniger ist.
html und body haben eine Höhe von 100%, darin liegt der Kontainer "wrapper" mit einer Mindesthöhe von 100%. Der Kontainer macht so genau was er soll. Bei wenig Inhalt streckt sich die Höhe auf die Fenstergröße, bei viel Inhalt dehnt sich der Kontainer mit dem Inhalt aus.
Im "wrapper" liegen ein "header" und ein "maincontainer".
Der "maincontainer" hat eine Höhe von 100%, sollte sich also am "wrapper" orientieren und dessen Höhe annehmen. Tut er aber nicht.
Im "maincontainer" liegt ein "maincontent" mit einer Höhe von 100%, sollte sich also am "maincontainer" orientieren, der eigentlich die Höhe von "wrapper" haben sollte. Das will aber erst recht nicht klappen.
Könnte mir bitte jemand sagen wo mein Fehler liegt?
Zur Verdeutlichung, hat der Wrapper einen roten Rahmen bekommen.
Ich hoffe ich konnte euch mein Problem gut beschreiben.
Hier der Quelltext:
HTML:
<div id="wrapper">
<div id="header"><h1>Title</h1></div>
<div id="maincontainer">
<div id="maincontent">
<div class="standardContainer">
<h3>Header</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt tempor enim, sit amet sagittis neque ullamcorper eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hendrerit sollicitudin est. Aliquam nec nibh dolor, id mattis lorem. Mauris dictum mollis dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
<div id="leftcontent">
<div class="standardContainer">
<h3>Header</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div id="content">
<div class="standardContainer">
<h3>Header</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt tempor enim, sit amet sagittis neque ullamcorper eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hendrerit sollicitudin est. Aliquam nec nibh dolor, id mattis lorem. Mauris dictum mollis dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
<hr class="clearFloat" />
</div>
</div>
</div>
CSS:
html {
height:100%;
margin:0;
padding:0;
}
body {
height:100%;
background:url(bg.jpg) top left repeat-x;
text-align:center;
margin:0;
padding:0;
}
#wrapper {
width:800px;
min-height:100%;
border:1px solid red;
text-align:left;
margin:0 auto;
}
#header {
background:url(hleft.jpg) top left no-repeat;
height:160px;
}
#header h1 {
margin:0 0 0 5px;
padding:50px 0 0 50px;
background:url(hright.jpg) top right no-repeat;
height:100%;
}
#maincontainer {
background:url(cleft.jpg) top left repeat-y;
/* greift nicht */
height:100%;
}
#maincontainer #maincontent {
height:100%;
margin-left:10px;
padding-right:10px;
background:url(cright.jpg) top right repeat-y;
}
.standardContainer {
margin-bottom:5px;
border-style:solid;
border-color:#7FD649;
border-width:1px;
}
.standardContainer h3 {
margin:0;
padding:0 0 0 5px;
border-bottom:1px solid #7FD649;
background:url(h3bg.jpg);
font-size:16px;
}
#leftcontent {
float:left;
width:200px;
}
#content {
margin-left:205px;
}
.clearFloat {
clear:both;
visibility:hidden;
margin:0;
padding:0;
width:0;
height:0;
}
Danke für eure Hilfe!
Sebastian