Antworten auf deine Fragen:
Neues Thema erstellen

height: 100%; overflow problem

pcgamer2005

Aviator

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

Nicht mehr ganz neu hier

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

Raucher

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

Aviator

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 :)
 

Orlandoo

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet:

sokie

Mod | Web

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.
 
Zuletzt bearbeitet:

pcgamer2005

Aviator

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.

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

Myhar

Hat es drauf

AW: height: 100%; overflow problem

Sieht es auch ok aus, wenn das Browserfenster verkleinert oder vergrößert wird?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.359
Mitglieder
67.535
Neuestes Mitglied
QuestionMark
Oben