✔ Layout dass das Browserfenster immer ausfüllt...

Status
Nicht offen für weitere Antworten.
SonMiko

SonMiko

Erfahrenes Mitglied
Hallo zusammen,

mein Layout besteht aus drei Teilen:
Oben, Mitte und Unten. Nun würde ich gerne der Mitte sagen, dass sie sich immer soweit es möglich ist, dehnen soll. Wobei allerdings die Bereiche "Oben" und "Unten" feste Größen haben die auch unverändert bleiben sollen.
Wie kann ich das realisieren?
Der Mittlere DIV- Teil hat auch bereits einen Scrollbalken (die äußeren habe ich entfehrnt),
alles klappt wunderbar - bis eben auf das ausdehnen...
Wäre toll, wenn mir jemand helfen könnte...

Besten Gruß und vielen Dank,

Euer

Mike
 
Oha - sieht schwer aus...
Also gemäß dem Fall ich würde mich zu einem günstigeren Zeitpunkt intensiver mit CSS auseinandersetzen: Wie würde ich das Problem denn mit einer Tabelle lösen?
Klar bin ich mir um die Problematiken der Tabelle an für sich im klaren...
Also eine Tabelle mit 3 Zeilen: Die Obere sagen wir hat die Höhe 100px, die Untere 50px - jetzt soll die mittlere Zeile automatisch, auch wenn viel weniger Inhalt vorliegt, soweit gedehnt bzw. gestreckt werden, bis die Seite perfekt ins Bild passt... Wie realisiere ich das nun? Also - wie gesagt, die Tutorials sind toll, und ich danke Dir für die Hilfe, aber ich würde es jetzt aus Zeitmangel mit Tabellen lösen - ich weiss dass es da einfach(er) möglich ist... Nur eben nicht genau wie...

// EDIT

Ah habs -

Dankeschön

Besten Gruß,

Mike
 
Vielleicht hilft dir dieser "abgespeckte" Quellcode von Stu Nicholls weiter?

Code: 
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer/ centred single column layout </title>
<style type="text/css">

html {
        height:100%;
        max-height:100%;
        padding:0;
        margin:0;
        border:0;
        background:rgb(209,205,193);
        /* hide overflow:hidden from IE5/Mac */
        /* \*/
        overflow: hidden;
        /* */
        }

body {
        height:100%;
        max-height:100%;
        overflow:hidden;
        padding:0;
        margin:0;
        border:0;
        background:rgb(209,205,193);
        }

#head {
        position:absolute;
        margin-left:-321px;
        left:50%;
        top:0;
        width:640px;
        min-width:640px;
        height:100px;
        background:#ddd;
        z-index:5;
        }

* html #head {
        top:0px;
        width:642px;
        height:100px;
        }

#content {
        display:block;
        overflow:auto;
        position:absolute;
        z-index:3;
        top:100px;
        bottom:50px;
        width:640px;
        margin-left:-321px;
        left:50%;
        background:#fff;
        }

* html #content {
        top:0;
        bottom:0;
        height:100%;
        width:642px;
        border-top:100px solid #ddd;
        border-bottom:50px solid #ddd;
        }

#foot {
        position:absolute;
        margin-left:-321px;
        left:50%;
        bottom:0;
        width:640px;
        min-width:640px;
        height:50px;
        background:#ddd;
        z-index:5;
        }

* html #foot {
        bottom:0;
        width:642px;
        height:50px;
        }
</style>
</head>

<body>
<div id="head">head</div>
<div id="content">
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
     <p>content</p>
</div>
<div id="foot">foot</div>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück