100% Höhe

[apeiros]

Hallo
Ich arbeite an einer page bei der ich endlich mal das ganze design nur über CSS steuern will (nachdem ich csszengarden.com gesehen habe musste das sein *g*). Nun habe ich linksseitig eine navigation und rechtsseitig den content. Der navigationsbalken soll die gesamte pagehöhe ausnutzen. Dem entsprechend habe ich es in ein <div> gepackt und folgendes zugewiesen:

div#navigation {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 140px;
 height: 100%;
}

Dem Content-Div habe ich dann folgendes zugewiesen:

div#body
{
 position: absolute;
 top: 0px;
 left: 140px;
}

Das Problem: wenn der Inhalt im Content-Div zu gross ist und der Browser eine vertikale scrollbar macht, dann hat die navigation einen unterbruch. D.h. die Navigation ist eben genau so hoch, wie das browserfenster (sprich die 100% orientieren sich wohl daran), weswegen sie beim runterscrollen unten nicht mehr fortgesetzt wird.

Weiss jemand für dieses Problem eine Lösung?

[Ingo Turski]

Hi,

Das Problem: wenn der Inhalt im Content-Div zu gross ist und der Browser eine vertikale scrollbar macht, dann hat die navigation einen unterbruch. D.h. die Navigation ist eben genau so hoch, wie das browserfenster (sprich die 100% orientieren sich wohl daran

das ist ganz normal und für Manchen eine "Schwäche" von CSS. Ich würde einfach darauf sowie auf die u.U. sehr ungünstige 100% Höhe verzichten.
Außerdem würde ich eher mit float und margin als mit absoluter Positionierung arbeiten.

freundliche Grüße
Ingo

[apeiros]

Hi,

Das Problem: wenn der Inhalt im Content-Div zu gross ist und der Browser eine vertikale scrollbar macht, dann hat die navigation einen unterbruch. D.h. die Navigation ist eben genau so hoch, wie das browserfenster (sprich die 100% orientieren sich wohl daran

das ist ganz normal und für Manchen eine "Schwäche" von CSS. Ich würde einfach darauf sowie auf die u.U. sehr ungünstige 100% Höhe verzichten.
Außerdem würde ich eher mit float und margin als mit absoluter Positionierung arbeiten.

freundliche Grüße
Ingo

Hi
Erstmal Danke für die Antwort. Allerdings: die Höhe muss 100% sein (rein gestalterisch so vorgegeben).
Wenn du möchtest, kann ich es ja mal online stellen. Der Hintergrund der Navigationsleiste ist schlicht anders als der beim Content und wenn das dann einfach irgendwo aufhört siehts ziemlich sch***** aus.
Wie würdest du das denn mit float und margin machen? Ich hab im Moment keine Idee, wie du dir das vorstellst...

Auf jeden Fall - gegeben ist:
Navigation (links, 100% hoch/durchgehend, zwingend 140px breit)
Content (rechts, restliche fläche benutzen)

Bezgl. "Schwäche" von CSS: ich verstehe schon, warum es so gemacht ist, aber IMHO wäre es schön, wenn man selbst das Bezugssystem (Browserfenster/Seitengrösse) selbst angeben könnte - aber tja, Pech, kann man nicht also muss eine andere Möglichkeit her.
Es gibt das ganze Problem ja dann auch in einer anderen Form: z.B. wollte ich mal die Breite auch mit 100% angeben - da links aber etwas mit 140px breite war, gabs dann immer einen horizontalen scrollbalken , weil die ganze page 100%+140px breit war... Gedacht wäre gewesen 140px,(rest des platzes)

gruss
apeiros

[apeiros]

Um ein Beispiel wie's ca. aufgeteilt ist zu machen:
http://www.webreference.com/html/tutorial24/example3/

Bloss, dass halt links eine absolute breite ist und die navigation kein overflow: scroll; haben sollte (weswegen die ganze seite scrollt oder gar nichts).

[Ingo Turski]

Hi,

Navigation (links, 100% hoch/durchgehend, zwingend 140px breit)
Content (rechts, restliche fläche benutzen)

tja, eine Möglichkeit gäbe es da, allerdings wäre die Navigation nur dann 100% so hoch wie der Inhalt:
#navi {position: absolute; top:0; left:0; z-index:99; width:140px;}
#content {border-left:140px solid teal;}

Mit einem Rahmen in der Höhe der Navigation wäre es eleganter mit float:
#navi {float:left; width:140px; background:teal;}
#content {margin-left:140px;}

freundliche Grüße
Ingo

[Ingo Turski]

Hi,
mir fällt da gerade noch eine Lösung mit echter 100%-Höhe ein:
eine Hintergrundgrafik für body, 140px breit in der gewünschten Farbe, die vertikal wiederrholt wird.
Damit läßt sich dann auch float richtig einsetzen.

freundliche Grüße
Ingo

[apeiros]

Hi,
mir fällt da gerade noch eine Lösung mit echter 100%-Höhe ein:
eine Hintergrundgrafik für body, 140px breit in der gewünschten Farbe, die vertikal wiederrholt wird.
Damit läßt sich dann auch float richtig einsetzen.

freundliche Grüße
Ingo

Hm, das ist aber bereits der Fall - das Problem ist ja eben, dass bei der angabe "height: 100%" dann das Hintergrundbild beim scrollen nicht fortgesetzt wird...

Bei deiner Float-Lösung wird das Hintergrundbild gar nicht angezeigt =(

grüsse
apeiros

[Detlef G.]

Hallo apeiros

Bei deiner Float-Lösung wird das Hintergrundbild gar nicht angezeigt =(

Ich glaube, du hast nicht ganz verstanden, wie Ingo es meinte.
Teste bitte folgendes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>
   test
  </title>
  <style type="text/css">
  <!--
  body {background: url(bg.gif) repeat-y;}
  #navi {float:left; width:140px;color:#FFF;}
  #content {margin-left:140px;}
  -->
  </style>
 </head>
 <body>
  <div id="navi">
   NAVIGATION
  </div>
  <div id="content">
   CONTENT
  </div>
 </body>
</html>

Dazu muss natürlich eine bg.gif mit der gewünschten Hintergrundfarbe deiner Navigation und 140 Pixel vorhanden sein. Ein oder zwei Pixel Höhe genügen.

Detlef

[apeiros]

Hallo apeiros

Bei deiner Float-Lösung wird das Hintergrundbild gar nicht angezeigt =(

Ich glaube, du hast nicht ganz verstanden, wie Ingo es meinte.
Teste bitte folgendes:

(samplecode)

Dazu muss natürlich eine bg.gif mit der gewünschten Hintergrundfarbe deiner Navigation und 140 Pixel vorhanden sein. Ein oder zwei Pixel Höhe genügen.

Detlef

Hi
Herzlichen Dank für den Sample-Code! Es scheint, als hätte ich einen Fehler bei der portierung von Ingos CSS-Tip gemacht, denn bei deinem Beispiel funktionierts wie gewünscht.
Ich werde mal ein wenig darüber brüten, was ich falsch gemacht habe.

gruss
apeiros