✔ Layout mit 100% height und width
- Themenstarter alex130
- Beginndatum
- Status
M
Maik
Hi,
vielleicht entsprechen Stu Nicholls' CSS-Layouts vom Grundprinzip her deinen Vorstellungen?
vielleicht entsprechen Stu Nicholls' CSS-Layouts vom Grundprinzip her deinen Vorstellungen?
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:
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>
M
Maik
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:
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;
}
M
Maik
Meinst du deinen Thread div height=100% nur im IE??
M
Maik
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.
- Status
