Tweet
Guten Abend.
Ich versuche mich schon seit mehreren Stunden an einem Layout per CSS und habe mich nun nach ewigem Durchforsten des Interents dazu entschlossen mich hier auszuheulen.
Das Layout besteht aus einem Header, einer Navigation (links) und einem Content-Bereich (rechts neben der Navigation).
Hier zu sehen: klick mich
Der Header hat eine feste Höhe. Die darunter liegende Navigation (feste Breite) und der Content Bereich sollten die restliche verfügbare Höhe bis zu Unterkante (Browser) einnehmen.
Weiterhin soll der Content die restliche zur Verfügung stehende Breite einnehmen.
Meine Annahme war, dass wenn ich die Höhe mit 100% angebe der zur Verfüfung stehende Rest ausgefüllt wird. Leider bezieht sich diese Angabe wohl auf maximale Browserhöhe und ich schieße voll über mein Ziel hinaus.
Hat hierzu jemand einen Tipp?
Ich versuche mich schon seit mehreren Stunden an einem Layout per CSS und habe mich nun nach ewigem Durchforsten des Interents dazu entschlossen mich hier auszuheulen.
Das Layout besteht aus einem Header, einer Navigation (links) und einem Content-Bereich (rechts neben der Navigation).
Hier zu sehen: klick mich
PHP-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=utf-8" />
<title>Untitled Document</title>
</head>
<body style="min-height: 100%; margin: 0px;">
<div id="body" style="position: absolute; height: 100%; width: 100%; border: none;">
<div id="header" style="position: absolut; height: 197px; width: 100%; border: none;
background-color:#333333; border: none;">HEADER</div>
<div id="navigation" style="position: relative; height: 100%; width: 210px; border: none;
background-color: #2C363F; float: left; border: none;">NAVIGATION</div>
<div id="content" style="position: absolute; left: 210px; height: 100%; width: 100%; border: none;
float: right; border: none; background-color: #CCCCCC;">CONTENT</div>
</div>
</body>
</html>
Weiterhin soll der Content die restliche zur Verfügung stehende Breite einnehmen.
Meine Annahme war, dass wenn ich die Höhe mit 100% angebe der zur Verfüfung stehende Rest ausgefüllt wird. Leider bezieht sich diese Angabe wohl auf maximale Browserhöhe und ich schieße voll über mein Ziel hinaus.
Hat hierzu jemand einen Tipp?
Kommentar