Problem mit Box: 100% Höhe gehen nicht!!

html.de-Forum HTML, XHTML & CSS
1

Hi, ich nerv mal wieder, aber ich glaube, das wird jetzt eine etwas anspruchsvollere Aufgabe ;> …Ich würde gerne eine Navigation an der linken Seite einbinden… Dafür habe ich einen

tag erstellt und der Box 100% Höhe gegeben… Aber: Der Hintergrund ist nur solange da, wie man nicht scrollen muss… Sobald man anfängt zu scrollen ist der Navigationshintergrund (Und folglich auch die Box) zu Ende… Hat jemand eine Idee, wie man der Box IMMER 100% Höhe zuschreibt? Auch wenn daneben zum Beispiel ein gaaaanz langer Text steht und man scrollen muss??

MfG .wired

2

Ich denke SelfHTML wird dir Helfen :lol:
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

3

Ich denke aber leider nicht so -.- Da hab ich mich schon mal durchgearbeitet… Bitte noch andere Vorschläge…

MfG .wired

4

Nun, ich weiß ya leider nicht was genau du willst und erwartest, meine Idee wäre aber position:fixed - wenn dir das nicht gefällt, musst du ein bisschen mehr Infos geben was genau du willst:smile:

5

Man könnte den Fortlauf der Box mit einem Rahmen „simulieren“:
[php]

[/php]So sieht es immer so aus, als wäre die linke Box genau so lang wie der Inhalt.

(#box mit float:left und fest definierter Breite und Hintergrundfarbe; #content mit border-left so breit wie #box und mit gleicher Rahmenfarbe wie der Hintergrund von #box)

Ich hoffe das ist 1. verständlich und 2. nützlich …

6

Hmm… ja es wäre eine Möglichkeit, aber soweit ich das sehe, ist der Inhalt dann immer unter der Box, und nicht in der Box… Diese Box ist ja mein Navigationshintergrund… Ich poste mal den Code, damit ihr mein Problem ein wenig besser versteht:

.navigation_background
{
  position: absolute;
  top: 0px;
  width: 190px;
  height: 100%;
  background-color: #AC6C04;
  z-index: 1;
  border-left: #000000 solid;
  border-right: #000000 solid;
  float: left;
}

.navigation
{
  position: absolute;
  top: 225px;
  width: 190px;
  text-align: center;
  z-index: 2;
}

Und hier der dazugehörige HTML-Code:

<div class="navigation_background"><div class="navigation"><! -- MEINE NAVIGATIN ( LINKS ETC. ) -- !></div></div>

Und RECHTS DANEBEN: „Gaaaaaaaaaaaanz langer Text“ oder sonstwas oder sonstwie postitioniert und gemacht, auf jeden Fall, dass man scrollen muss… Und HIER setzt CSS aus: Die .navigation_background Box will einfach nicht weiter runtergehen, egal wie ich es versuche…

Hoffe, es findet noch jemand eine Lösung, wenn ich es wäre hätt ich auch nix dagegen ;>

MfG .wired

7

Eine schlechte Möglichkeit, aber es ist eine: Du machst um das ganze ein Div und belegst es mit der gleichen Hintergrundfarbe wie die Navigation, dem Inhalt musst du dann auch noch eine Hintergrundfarbe hinzufügen. Das wäre auch „simuliert“ wie von BcF eine Möglichkeit beschrieben wurde.

8

Also das verstehe ich jetzt nicht so ganz… Die Navigation ist doch schon vom Background verschachtelt… So kann ich doch unendlich weiter verschachteln und es ändert sich nichts… Oder hab ich dich falsch verstanden??

MfG .wired

9

Versuchs mal so:

[code].navigation_background
{
position: fixed; // ← So …
top: 0px;
width: 190px;
height: 100%;
background-color: #AC6C04;
z-index: 0;
border-left: #000000 solid;
border-right: #000000 solid;
float: left;
}

.navigation
{
position: absolute;
top: 225px;
width: 190px;
text-align: center;
z-index: 1;
}[/code][code]

// ← Und nicht verschachtelt …

MEINE NAVIGATIN ( LINKS ETC. )
[/code]
10

Ich meinte, dass du ein Div um die Navigation UND den Inhalt machst somit wird diese Box mit nach unten lang gezogen.

11

Also Drakes, ich glaube ich bin einfach zu doof für deine Lösung :smiley: ich versuch jetzt schon seit einer halben Stunde dahinterzukommen was du meinst, und kriegs nicht gebacken :smiley: ;> … Naja, das mit dem position: fixed; funktioniert nur beim Firefox… Ich glaube aber, ich habe auch schon eine Idee, wie ich es lösen könnte… ebenfalls nicht sehr schön und es würde die Ladezeit auch nochmal vergrößern aber nicht um so, dass es auffallen würde: Dem body so eine ein Pixel hohe Grafik zuordnen, die so aussieht wie die Navigation und in y-Richtung wiederholen lassen… Insofern also danke an alle ;>

MfG .wired

PS.: wenn jemandem noch eine Lösung einfällt, immer her damit ;>

12

#seite { background-color: green; /* Farbe der Navi */ } #navi { float: left; } #inhalt { background-color: white; } [html]

[/html]Etwas in dem Stil hatte ich gedacht. Habe es aber nicht getestet.