height: 100%; overflow problem

pcgamer2005 · 30.07.2012

Hi, habe da ein kleines problem. ich habe eine class = "wrapper" die 100% höhe der webseite ausfüllen soll. funktioniert auch alles soweit nur hab ich ganz oben in der seite ein durchsichtiges "nav" element (30px hoch) so dass ich den wrapper 30px nach unten verschoben habe (position: relative; top: 30px

damit der weiße wrapper nicht unter der weißen nav leiste durchscheint. nun krieg ich aber die hässliche scrollleiste am rechten rand weil der 100% wrapper ja nun 30x weiter nach unten ragt. ich hab schon versucht im body overflow: auto; einzustellen nur erscheint dann die scrolleiste unter der nav leiste. kann mir da jemand weiterhelfen? danke im vorraus

hier das html:

HTML:

<body>

<nav>
  <ul>
    <li><a href="#" class="firstactive">.lazaroblanc</a></li>
    <li><a href="#">Über mich</a></li>
    <li><a href="#">Fotos</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Arbeit</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
</nav>

<div class="wrapper"></div>

</body>

habe ein bild mit dem problem und dem css code angehängt:

Matte · 30.07.2012

AW: height: 100%; overflow problem

Hi

Hast du mal versucht die Divs mit "index" übereinander zu legen?

In deinem Falle sollte das ja dann z.B. so aussehen im Quelltext:

Für die Nav-Bar:

Code:

<div id="Nav" style="z-index: 99;">

und dem Wrapper dann:

Code:

<div id="Wrapper" style="z-index: 98;">

Die höhere Zahl liegt dann eine "Ebene" höher.

Aber ohne Gewähr jetzt, mir hat das aber mal geholfen.

Gruß

Matte

koenigsadler · 30.07.2012

AW: height: 100%; overflow problem

Ich schlage dir mal vor dich mit dem scrollbalken anzufreunden. Du musst damit rechnen das nicht jeder Betrachter deiner Webseite deine Auflösung besitzt. Kleinere Auflösung gleich weniger Platz, aber irgendwo müssen die Infos doch hin. Daher entscheide dich am besten für eine feste Höhe. Mach dir das Leben nicht zu schwer, Design ist nicht alles, eine Webseite soll eigentlich hauptsächlich immer Informationen vermitteln.

Ausserdem solltest du an die Kompatibilität denken, der Nav Tag ist nur ab IE 8 unterstützt, ausserdem ist der IE bei der Rgba Darstellung sehr pingelig.

Ausserdem, overflow hat nur Auswirkungen darauf, wie Inhalt, der über den Rand eines Containers hinausschaut, dargestellt wird. Das sind Grundlagen, und ohne diese wirst du es Schwer haben.

pcgamer2005 · 30.07.2012

AW: height: 100%; overflow problem

Hi

Hast du mal versucht die Divs mit "index" übereinander zu legen?

jup hab ich, würde auch funktionieren nur dann hab ich in dem wrapper oben 30 unbenutzte pixel, die müsste ich dann mit padding-top wieder rausholen und dan hätt ich wieder das selbe problem.

Ich schlage dir mal vor dich mit dem scrollbalken anzufreunden. Du musst damit rechnen das nicht jeder Betrachter deiner Webseite deine Auflösung besitzt. Kleinere Auflösung gleich weniger Platz, aber irgendwo müssen die Infos doch hin. Daher entscheide dich am besten für eine feste Höhe. Mach dir das Leben nicht zu schwer, Design ist nicht alles, eine Webseite soll eigentlich hauptsächlich immer Informationen vermitteln.

Jo ich glaub ich werd auch ne feste höhe nehmen danke

Ausserdem solltest du an die Kompatibilität denken, der Nav Tag ist nur ab IE 8 unterstützt, ausserdem ist der IE bei der Rgba Darstellung sehr pingelig.

Ausserdem, overflow hat nur Auswirkungen darauf, wie Inhalt, der über den Rand eines Containers hinausschaut, dargestellt wird. Das sind Grundlagen, und ohne diese wirst du es Schwer haben.

Schon bemerkt, hab die rgba werte schon in hex umgewandelt, die seite ist ja zurzeit nur ein gerippe, ich benutzt rgba meistens nur um zu sehen wie farben miteinander kombinieren und am ende benutzt ich immer hex

der ie ist mir eigentlich ziemlich egal aber ich kanns ja schnell ändern indem ich da einfach <div class=" davorsetze und im css einfach nen punkt davor, aber danke für die hilfe

koenigsadler · 30.07.2012

AW: height: 100%; overflow problem

Vllt, interessant für dich,
http://www.youtube.com/watch?v=2aA8eB6P2sM&feature=youtube_gdata_player

Meiner meinung ein super tutorial, zur Navigations Erstellung, ohne schickschnack, nur mit Html und CSS.

pcgamer2005 · 30.07.2012

AW: height: 100%; overflow problem

koenigsadler schrieb:
Vllt, interessant für dich,
http://www.youtube.com/watch?v=2aA8eB6P2sM&feature=youtube_gdata_player

Meiner meinung ein super tutorial, zur Navigations Erstellung, ohne schickschnack, nur mit Html und CSS.

öhm, genau so hab ichs doch gemacht (hab jetzt das nav in <div class="nav" geändert) nur dass ich keine dropdowns habe

Matte · 30.07.2012

AW: height: 100%; overflow problem

Grade hab ich noch das hier gefunden, falls du dich nicht mit dem Scrollbalken anfreunden willst. Ich find das schon ziemlich nice :eek:

)

http://davidwalsh.name/demo/iscroll.html

Gruß

pcgamer2005 · 30.07.2012

AW: height: 100%; overflow problem

Matte schrieb:
Grade hab ich noch das hier gefunden, falls du dich nicht mit dem Scrollbalken anfreunden willst. Ich find das schon ziemlich nice )

http://davidwalsh.name/demo/iscroll.html

Gruß

Danke

Brauch ich zwar nicht unbeding für diese Seite aber ich werds mir mal als lesezeichen abspeichern, wer weiß wann man das vlt. braucht/haben will

Orlandoo · 31.07.2012

AW: height: 100%; overflow problem

Keine Ahnung, welche Folgeprobleme dabei auftauchen, aber die Aufgabenstellung ist mit diesem CSS-Code erfüllt:

Code:

.wrapper {
    position: absolute;
    top: 30px;
    bottom: 0px;
    left: 50%;
    margin: 0 0 0 -300px;
    width: 600px;
    background-color: #009900;
}

Beste Grüße

sokie · 31.07.2012

AW: height: 100%; overflow problem

wenn Du sowohl Navigation als auch Inhalte in den wrapper packst, sollte das funktionieren.
Du brauchst zwischen der navi und dem Inhalt keinen Abstand per positionierung, da dieser automatisch durch die Höhe des nav Elements entsteht.

wie koenigsadler schon andeutete macht eine Festlegung der Höhe wenig Sinn, also einfach weglassen.

pcgamer2005 · 31.07.2012

AW: height: 100%; overflow problem

sokie schrieb:
wenn Du sowohl Navigation als auch Inhalte in den wrapper packst, sollte das funktionieren.
Du brauchst zwischen der navi und dem Inhalt keinen Abstand per positionierung, da dieser automatisch durch die Höhe des nav Elements entsteht.

wie koenigsadler schon andeutete macht eine Festlegung der Höhe wenig Sinn, also einfach weglassen.

danke aber ich hab jetzt einfach ne feste höhe genommen und es sieht nicht schlecht aus meiner meinung nach

Myhar · 31.07.2012

AW: height: 100%; overflow problem

Sieht es auch ok aus, wenn das Browserfenster verkleinert oder vergrößert wird?

pcgamer2005 · 31.07.2012

AW: height: 100%; overflow problem

Myhar schrieb:
Sieht es auch ok aus, wenn das Browserfenster verkleinert oder vergrößert wird?

entscheide für dich selbst