Hallo Zusammen
Ich möchte zwischen dem Header & fixiertem Footer ein Content-Div haben, dass 100% der Lücke dazwischen aufüllt (unabhängig von der Bildschirmauflösung). Habe nun eine Lösung dafür gefunden und diese funktioniert wunderbar. Hier der Link dazu: Link | stackoverflow.com
Nun möchte ich aber nicht nur ein Div zwischen Header & Footer sondern die berühmten 3 Spalten. Wenn ich die nun im Content-Div einfüge, verhalten diese sich nicht (erwartungsgemäss) wie der Content und passen sich nicht der Höhe an. Kann mir jemand sagen, wie ich das lösen kann? Vielen Dank für Eure Hilfe!!!
Screenshot wie es aussieht:
So sollte es aussehen (Photoshop):
Hier noch mein HTML-Code: (Wird ein bisschen länger... sry
)
Und hier der CSS Code:
Ich möchte zwischen dem Header & fixiertem Footer ein Content-Div haben, dass 100% der Lücke dazwischen aufüllt (unabhängig von der Bildschirmauflösung). Habe nun eine Lösung dafür gefunden und diese funktioniert wunderbar. Hier der Link dazu: Link | stackoverflow.com
Nun möchte ich aber nicht nur ein Div zwischen Header & Footer sondern die berühmten 3 Spalten. Wenn ich die nun im Content-Div einfüge, verhalten diese sich nicht (erwartungsgemäss) wie der Content und passen sich nicht der Höhe an. Kann mir jemand sagen, wie ich das lösen kann? Vielen Dank für Eure Hilfe!!!
Screenshot wie es aussieht:
So sollte es aussehen (Photoshop):
Hier noch mein HTML-Code: (Wird ein bisschen länger... sry
)
HTML:
<body>
<div id="divContent">
<div id="divHeader">Header</div>
<div id="divTabs">Tabs</div>
<!-- Start 3 Column-->
<div class="container threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
Column 1
<br /><br /><br />
</div>
<div class="col2">
Column 2
</div>
<div class="col3">
Column3
</div>
</div>
</div>
</div>
<!--End 3 Column-->
<div id="divPush"></div>
</div>
<div id="divFooter">Footer</div>
</body>Und hier der CSS Code:
Code:
html, body
{
height: 100%;
}
body
{
margin:0;
padding:0;
border:0; /*entfernt Rand in alten IE-Versionen*/
width:100%;
min-width:1280px; /*Mindestbreite des Layouts
/*min-...-Attribute funktionieren nicht in alten IE-Versionen*/
}
#divHeader
{
clear:both;
height: 70px;
float:left;
width:100%;
/*temp*/ background-color: Red;
}
#divTabs
{
clear:both;
height:40px;
float:left;
width:100%;
/*temp*/ background-color:Orange;
}
#divContent
{
min-height: 100%;
height: auto !important; /*IE6 unterstützung*/
height: 100%;
margin: 0 auto -30px; /*muss gleich wie Footer/Push-Höhe sein*/
vertical-align: bottom;
/*temp*/ background-color: Blue;
}
#divFooter, #divPush
{
height: 30px; /* Höhe von divFooter & divPush muss gleich sein*/
}
#divFooter
{
position: fixed;
width: 100%;
left: 0;
bottom:0px;
/*temp*/ background-color:Green;
}
/***************************************************/
/*********************3-Columns*********************/
/***************************************************/
/* column container */
.container {
position:relative; /* Behebt IE7 overflow:hidden bug */
clear:both;
float:left;
width:100%; /* Breite der Seite */
overflow:hidden; /* Verhindet übehängende Divs */
}
/* column settings */
.colright,.colmid,.colleft
{
float:left;
width:100%; /* Breite der Seite */
position:relative;
}
.col1,.col2,.col3
{
float:left;
position:relative;
padding:0 0 1em 0; /* Aussenabstände Spaltencontainer*/
overflow:hidden;
}
/* 3 Column settings */
.threecol
{
background:yellow; /* rechte Seite Hintergrund*/
}
.threecol .colmid
{
right:25%; /* Breite Rechte Spalte */
background:green; /* Mittlere Spalte Hintergrund */
}
.threecol .colleft
{
right:50%; /* Breite Mittlere Spalte */
background:yellow; /* Linke Spalte Hintergrund */
}
.threecol .col1
{
width:46%; /* Breite Inhalt Mitte (Spaltenbreite minus padding beider Seiten) */
left:102%; /* 100% plus padding links der Spalte Mitte */
}
.threecol .col2
{
width:21%; /* Breite Inhalt Links(Spaltenbreite minus padding beider Seiten) */
left:31%; /* Breite (Rechte Spalte) plus (Inhalt Mitte padding links & rechts) plus (Spalte links padding links) */
}
.threecol .col3
{
width:21%; /* Breite Inhalt Rechts (Spaltenbreite minus padding beider Seiten) */
left:85%; /* Beachte -> (100% - Breite Linke Spalte) plus (Spalte Mitte padding links & rechts) plus (linke Spalte padding links & rechts) plus (Spalte rechts padding links) */
}
Zuletzt bearbeitet:
