[HTML+CSS] DIV Scroll-Problem

[Waldiphil]

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>  

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;  
}  

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).

Das Scroll-Problem ist, dass der Scrollbalken NUR zu sehen sein soll, wenn der Text zu lang wird. Mit "overflow:scroll" ist der Balken aber immer zu sehen, und anders funktioniert das Scrollen überhaupt nicht ?!?!

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

[Matthias Apsel]

Om nah hoo pez nyeetz, Waldiphil!

<style="clear:both">

Frag doch mal den Validator, was der dazu sagt (oder auch das SELFHTML-Wiki).

Das Scroll-Problem ist, dass der Scrollbalken NUR zu sehen sein soll, wenn der Text zu lang wird. Mit "overflow:scroll" ist der Balken aber immer zu sehen, und anders funktioniert das Scrollen überhaupt nicht ?!?!

im Wiki findest du auch etwas zu overflow.

Matthias