✔ Layout mit 100% height und width

Status
Nicht offen für weitere Antworten.
A

alex130

Erfahrenes Mitglied
Hi
Ich hab ein Problem und zwar weiß ich nicht, wie ich so ein Layout mit 100% height und width amchen kann. Kann mir da bitte jemand helfen?
Ich hab auch noch nen Screen angehängt.
Thx
 

Anhänge

  • 100%.jpg
    100%.jpg
    15,4 KB · Aufrufe: 55
Hi
Ich hab jetzt mal sowas einfaches gecodet, aber das funktioniert nicht ganz, das Menu geht links ganz nach oben und der Content bereich ist nicht da :(
Ich hoffe du kannst mir helfen:
Code: 
<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#header {
width: 100%;
height: 20%;
position: fixed;
background-color: #FF0000;
}

#menu {
width: 25%;
height: 80%;
float: left;
background-color: #0000FF;
position: fixed;
}

#content {
width: 75%;
height: 80%;
float: right;
background-color: #000000;
}
</style>
</head>

<body>

<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>

</body>
</html>
 
Ehrlich gesagt verstehe ich jetzt nicht, weshalb du das Rad neu erfinden willst, wenn ich dir heute Morgen die Links zu drei lauffähigen Lösungsbeispielen genannt habe.

Dass das Menü am oberen Fensterrand ausgerichtet ist, liegt einfach daran, dass du den Header mit einer 20%-Höhe positioniert und das Menü nicht dementsprechend von oben positioniert hast. Gleiches dürfte auch für den Content-Bereich gelten.

Zudem müsstest du die folgende Regel um das html-Element erweitern:

Code: 
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
 
Hallo!

Wenn ich mir seinen Code so ansehe, sieht es mir nach einer abgewandelten Version eines unserer Beispiele aus. ;)

Gruss Dr Dau
 
Wenn, dann dürfte es sich um eine "abgespeckte" Version eines deiner Beispiele handeln, da meine später angehängten Beispiele für ein Layout mit fixer Breite gedacht sind. ;)
 
So genau habe ich es mir nicht angesehen..... war bis vorhin ja auch nicht möglich (Dominik hatte ja mal wieder gebastelt ;) ).
Mir kam der Code halt nur irgendwie bekannt vor.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück