Hallo,
ich versuche gerade mal wieder meine CSS Kentnisse aufzufrischen und wollte mir ein Layout machen. Dieses hat im oberen Teil ein DIV-Container, der Header, einen mittleren mit dem Content und eine Fußzeile. Das ganze sieht im Moment mal so aus:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> </head> <body> <div style="background-image:url(background.jpg);background-repeat:repeat; margin:0px; padding:0px; position:fixed; left:0px; top:0px; width:100%;"> <div style="background-image:url(header.jpg); background-repeat:repeat; height:115px; width:100%;">header</div> <div style="height:auto; width:950px; position:relative; left:50%; margin-left:-475px; margin-top:10px; margin-bottom:-10px;"> <div style="width:700px; float:left;"> <div style="background-image:url(box_content_oben.png); background-repeat:no-repeat; height:15px; "> </div> <div style="background-image:url(box_content_mitte.png); background-repeat:repeat-y; "> <div style="width:640px; background-color:#FFFFFF; position:relative; top:10px; left:20px;">Hier steht der Content </div> </div> <div style="background-image:url(box_content_unten.png); background-repeat:no-repeat; height:16px; ">unten</div> </div> <div style=" width:250px; float:right;"> <div style="background-image:url(box_banner_oben.png); background-repeat:no-repeat; height:14px; "> </div> <div style="background-image:url(box_banner_mitte.png); background-repeat:repeat-y; height:100%; "> <div style="width:195px; background-color:#000000; position:relative; top:10px; left:20px;">Content</div> </div> <div style="background-image:url(box_banner_unten.png); background-repeat:no-repeat; height:24px; ">unten</div> </div> </div> <div style="background-image:url(box_footer_komplett.png); background-repeat:repeat; height:115px; width:100%; position:absolute; left:0px; bottom:0px;">footer</div> </div> </body> </html>
Das Problem ist jetzt aber, wenn der Contentbereich zu groß wird, also die Stelle wo steht "Hier steht der Content", dann passt sich die box zwar an, es erscheinen im Brwoser aber keine Scroll-Balken, egal, ob ich mit overflow arbeite oder nicht. Ich geh mal davon aus, ich muss meinem mittleren DIV noch irgendwie beibringen dass die Höhe Variabel sein soll?