Einem <div> 100% höhe zuweisen?

gf-x

Website: http://www.chromstahl-design.ch/cms/

div id= #menu

HTML

#menu {
background: #00ff00;
border-left: 1px dotted #000000;
border-top: solid 3px #333333;
border-bottom: solid 3px #333333;
padding: 20px 0 10px 30px;
position: absolute;
left: 2px;
top: 85px;
width: 150px;
height: 100%;
}

Alles anzeigen

Ich möchte, das das menü div auf der seite (grüner hintergrund ) immer 100% der gesamtlänge vom contentlayout ausmacht, also immer schön den ganzen teil zwischen header und footer ausnützen.

nur, wie kann ich das umsetzten? leider sind es ja hier keine tabellen wo man mit den 100% arbeiten könnte. Zumindest funktioniert es nicht

wie kann ich das umsetzen? oder ist das schlicht nicht möglich?

Danke für antworten/hilfe!

mfg gf-x

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

möglich ist alles,

css hacks wie es geht findest du hier

lg

Straßenkehrer

Mit der Höhe von 100% ist das so ne Sache. Das bezieht sich immer auf das Elternelement, d.h. wenn das keine Höhe zugewiesen bekam, hat auch das Kind-Element keine explizite Höhe. Außerdem klappt es spätenstens dann nicht mehr, wenn alles höher wird als das Fenster auf dem Bildschirm. Das geht wirklich nur mit Tabellen. Besser ist dieses: #rap bekommt den Hintergrund fürs Menü, also grün. alle anderen darin liegenden Blöcke bekommen ihren Hintergrund zugewiesen, der überlagert dann das Grün. Wenn Deine navigation länger wird als der content, klappt es natürlich nicht, dann ggf. dem content min-height in em(!) zuweisen. IE kann kein min-hight, dem mußt Du extra ein height verpassen. Keine Sorge, es gibt keine scrollbalken, weil für IE height und min-height eins ist. Ach, ich seh grad, Du hast das menu absolut positioniert. Das funktioniert dann doch nicht, weil der Block #rap so gar nicht "weiß". wann Dein menu zu Ende ist. Gehts nicht auch relativ? Grüße vom Straßenkehrer

telekommander

Ein Beispiel, wenns eventuell hilft :

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css"><!--
html {height:100%;}
body {
 height:100%;
 margin:0%;
 padding:0%;
}
div#container_rot {
 background: #FF0000;
 margin:0% 3%;
 padding:0% 1%;
 border:1px solid #000000;
}
div#container_grau {
 background: #888888;
 margin:0% 3%;
 padding:0% 1%;
 height:100%;
 border:1px solid #000000;
}
//--></style>
<title>100 Pro</title>
</head>
<body>
<div id="container_rot">
 <div id="container_grau">
  <h1>Div-Container. Höhe 100%</h1>
  content<br />
  content<br />
  content<br />
  content<br />
  content<br />
  content<br />
  content<br />
  content<br />
 </div>
</div>
</body>
</html>

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Einem <div> 100% höhe zuweisen?

Jetzt mitmachen!