Layout mit 100% Höhe

Status
Nicht offen für weitere Antworten.
R

redbecks

Grünschnabel
Nabend!

Ich habe versucht über Google und dieses Forum meine Probleme zu lösen, doch ich konnte keine passende Lösung für genau das Problem finden.

Und zwar möchte ich sehr gerne dieses Layout komplet in CSS ohne Frames oder Tabellen umsetzen.

Ich habe vor allem Probleme mit "Overflow" im Bereich #content. Doch auch im Opera-Browser habe ich das Problem, dass beim "Mausradscroll" das gesamte Layout runter rutscht...

Ich würde mich riesig freuen, wenn mir geholfen werden kann. Und falls ich während meiner Suche etwas übersehen haben sollte und es schon einmal hier gepostet wurde, tut es mir leid.

Gruß
Simon

So schaut es aus: LIVE DEMO

style.css:
Code: 
html {
        overflow: hidden;
        width: 100%;
        height: 100%;
}

body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0px;
}

.wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
}

.wrapper .header {
        width: 100%;
        height: 100px;
        background-color: #64abe6;
}

.wrapper .wrapper2 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        padding-top: 100px;
}

.wrapper .wrapper2 .left {
        position: absolute;
        width: 100px;
        height: 100%;
        background-color: #3d719e;
}

.wrapper .wrapper2 .submenu {
        position: absolute;
        width: 100%;
        height: 20px;
        margin-left: 100px;
        background-color: #082945;
}

.wrapper .wrapper2 .menu {
        position: absolute;
        width: 100px;
        height: 100%;
        margin-top: 20px;
        margin-left: 100px;
        background-color: #34526b;
}

.wrapper .wrapper2 .content {
        position: absolute;
        width: 100%;
        height: 100%;
        margin-top: 20px;
        margin-left: 200px;
        background-color: #3d719e;
        overflow: auto;
}

.wrapper .footer {
        position: absolute;
        bottom: 0px;
        right: 50px;
        width: 300px;
        height: 20px;
        background-color: #64abe6;
}

und die index.html

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" xml:lang="en" lang="en">
<head>
<title>LIVE DEMO</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="wrapper">
        <div class="header">#header</div>
        <div class="wrapper2">
                <div class="submenu">#submenu</div>
                <div class="left">#left</div>
                <div class="menu">#menu</div>
                <div class="content">
                        #content
                </div>
        </div>
        <div class="footer">#footer</div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück