Hallo
ich habe jetzt mehrere Stunden an einem CSS-basiertem Layout (nur HTML+CSS) gearbeitet und komme einfach nicht mehr weiter.
Das Problem ist folgendes:
Der DIV #content2 endet nicht am DIV #foot (trotz clear:both), sondern läuft dahinter weiter (nur, weil die Eltern-Elemente "overflow:hidden" haben, wird die Seite nicht unter dem footer fortgesetzt.).
Zum zweiten kriege ich es nicht hin, dass man in diesem DIV ordentlich scrollen kann.
Die HTML-Datei (ohne body, head, html, doctype, etc.):
<div id="content">
<div id="head">
HEAD
</div>
<div id="content2">
CONTENT
</div>
<style="clear:both">
<div id="foot">
FOOT
</div>
</div>
<div id="left"></div>
<div id="right"></div>
Alles anzeigen
und die zugehörige CSS-Definition:
@charset "utf-8";
/*PARENT*/
HTML, BODY {
margin: 0;
padding: 0;
height: 100%;
}
/*CHILD1*/
#left {
float: left;
background-color: #00F;
width: 50%;
height: 100%;
}
/*CHILD2*/
#right {
background-color: #00F;
float: right;
width: 50%;
height: 100%;
}
/*CHILD3*/
#content {
margin: 0 auto;
left: 50%;
margin-left:-500px;
width: 1000px;
position: absolute;
min-height: 100%;
height: auto;
border-left-style: inset;
border-right-style: outset;
border-color: black;
overflow: auto;
}
/*IE HACK CHILD3*/
* html #content
{
height: 100%;
}
/*GRANDCHILD1*/
#head {
width: 1000px;
height: 150px;
overflow: hidden;
background-color:#3F0;
position: fixed;
}
/*GRANDCHILD2*/
#content2 {
background-color: #C00;
width: 1000px;
overflow: auto;
min-height: 100%;
height: auto;
position: fixed;
margin-top: 150px;
margin-bottom: 10cm;
}
/*IE HACK GRANDCHILD2*/
* html #content2
{
height: 100%;
}
/*GRANDCHILD3*/
#foot {
width: 1000px;
height: 21px;
overflow: hidden;
background-color:#03F;
bottom: 0pt;
position: fixed;
}
Alles anzeigen
Statt HEAD; FOOT, CONTENT einfach einen langen Text einkopieren (ich will meinen Beitrag hier nicht zu lang werden lassen, deshalb habe ich meine Beispieltexte durch diese Platzhalter ersetzt).
ich wäre sehr dankbar, wenn mir jemand helfen könnte, zum einen den content2-DIV ordentlich abzuschließen, und zum anderen eine ordentliche Scroll-Funktion einzubauen !
Vielen Dank!
Philipp