✔ 100% height, + fester Header/Footer, innen scrollbar

Status
Nicht offen für weitere Antworten.
T

Tago

Mitglied
Hallo zusammen,

ich versuche mich gerade an einem Aufbau komme aber zu keiner Lösung.
Es geht um ein Intranet, Browser Firefox, daher ist IE uninteressant.

Die Seite soll 100% Breite und Höhe einnehmen, dazu einen pixelfesten Header und Footer.

Das bekomme ich noch hin:
HTML
Code: 
<body>
<div id="main_container">
	<div id="main_top"></div>
    <div id="content_left"></div>
    <div id="content_right"></div>
</div>
<div id="main_footer"></div>
</body>
CSS
Code: 
* { margin:0; padding:0; }
html, body { height: 100%; }
#main_container{ position: relative; min-height: 100%; background-color:#999999; }
#main_top{ width:100%; height:40px; background-color:#FFFFFF; }
#content_left{ ? }
#content_right{ ? }
#main_footer{ position: relative; margin: -30px auto 0 auto; background-color:#CCCCCC; height:29px; border-top: 1px solid #000000; }

Und jetzt kommt das Problem.
Die Mitte (content_left und content_left) sollen den Rest ausfüllen, quasi 100% der innern Höhe. Dazu jeweil eine Scrollleiste bekommen.
Habe auch schon daran gedacht die Pixelwerte mit Javascript abzufangen und die div mit JS die passende Höhe zu übertragen, allerdings kann man das wohl nicht.

Kann mir jemand weiterhelfen?

Viele Grüße
 
Hi,

da wir den IE (<7) aussen vor lassen können, ist das Prinzip recht einfach ;)

Code: 
* {
margin:0;
padding:0;
}

html,body {
height:100%;
}

#main_container {
position:relative;
min-height:100%;
background-color:#999;
}

#main_top {
position:absolute;
top:0;
left:0;
width:100%;
height:40px;
background-color:#fff;
}

#content_left {
position:absolute;
top:40px;
bottom:30px;
left:0;
width:49%;
background:#e5e5e5;
overflow:auto;
}

#content_right {
position:absolute;
top:40px;
bottom:30px;
right:0;
width:49%;
background:#e5e5e5;
overflow:auto;
}

#main_footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:29px;
border-top: 1px solid #000000;
background-color:#ccc;
}

.contentBox { /* dient in diesem Beispiel zum Erzeugen der Scrollbalken */
height:2000px;
}
Code: 
<div id="main_container">
     <div id="main_top">main_top</div>
     <div id="content_left">
          <div class="contentBox">content_left</div>
     </div>
     <div id="content_right">
          <div class="contentBox">content_right</div>
     </div>
     <div id="main_footer">main_footer</div>
</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück