DIVs zu hoch bei 100%

Guten Tag,

Ich habe ein Problem mit der Höhe von Divs - und das schon seit ich versuche mich von Tabellen um zu gewöhnen :D.

Ich besitze in meinem HTML-Dokument zwei absolute Divs.
Das erste div hat den CSS Wert "top:0px;" und "height: 100px;".
Das zwete div hat "top: 100px;" und "height: 100%".

Das problem ist nun, dass das Div 100px über den Browserrand überschreitet.
Ich habe es bereits mit margin-bottom oder anstatt "height: 100%;" mit "bottom: 0px;" versucht. Aber nichts funktioniert zufriedenstellend .

Der erste div braucht eine Feste höhe - da es ein Bild besitzt.
Das zweite div muss genau bis zum Ende der Seite kommen.

Ich hoffe es kann mir jemand helfen .

Herzlichen Dank.

Gruss
 
Das ist echt mal ein interessantes Problem. Man kann es zwar durch einige hässliche Hacks lösen (siehe unten), aber das ist ja auch nicht wirklich das Wahre.

Vielleicht weiß ja hier jemand hier im Forum, wie man das schöner hinbekommt.

Also, hier der Hack: Ich habe einfach das zweite Div nach oben (top:0) gesetzt, und ein drittes DIV mit einer Höhe von 100px in das Zweite hineingesetzt, damit der Text nach unten rutscht.

Code:
<style>
.div1 {
position: absolute;
top: 0;
height:100px;
}
.div2 {
position: absolute;
top: 0;
height:100%;
}
.divFill {
height: 100px;
position: relative;
left: -1000px;
}
</style>
<div class="div1">Div 1</div>
<div class="div2">
  <div class="divFill"></div>
  Div 2
</div>
 
Hey, danke für den Lösungsvorschlag.
Wir haben nur das Problem das unsere Divs muster enthalten...
Wir habens im moment mit
Code:
bottom: 0px;
notgelöst, aber das div schneidet sich dann einfach ab---
Schau es dir am besten selbst an:
www.sosindwir.de/webhorse/

Hoffe ihr könnt mir helfen....

Edit:
Sorry hatten grad nen kleinen Fehlern, die page kann man jetzt anschauen....
 
Hast du schon mal überlegt dem oberen Div auch eine Prozentangabe zu geben.Div1 machst du 10% und Div2 90%.Natürlich beides mit margin-top und margin bottom 0px.So hat dein Layout eine höhe von 100%.

Das hat den Vorteil,dass deine Seite auch bei höheren Auflösungen gut aussieht.Mit px Angaben hat man immer ein paar Probleme bei den unterschiedlichen Auflösungen.
 
Original von BigDevil
Hast du schon mal überlegt dem oberen Div auch eine Prozentangabe zu geben.Div1 machst du 10% und Div2 90%.Natürlich beides mit margin-top und margin bottom 0px.So hat dein Layout eine höhe von 100%.

Das hat den Vorteil,dass deine Seite auch bei höheren Auflösungen gut aussieht.Mit px Angaben hat man immer ein paar Probleme bei den unterschiedlichen Auflösungen.

mh...

Original von DolphVS
Der erste div braucht eine Feste höhe - da es ein Bild besitzt.

oder hab ich da was falsch verstanden?
 
@boehmi: Neine hast du richtig verstanden. deswegen gehen prozentangaben nicht, da das Bild dann komplett verzogen ist!

@BigDevil: Danke für den Vorschlag, aber aus dem Grund den boehmi auch zitiert hat geht das leider nicht, da das Bild dann komplett verzogen ist!
 
Irgendwie kann ich nicht schreiben oder ihr nicht lesen:
@valenterry:
siehe meine letzten posts und du findest das hier:
Hey, danke für den Lösungsvorschlag.
Wir haben nur das Problem das unsere Divs muster enthalten...
Wir habens im moment mit
Code:
bottom: 0px;
notgelöst, aber das div schneidet sich dann einfach ab---
Schau es dir am besten selbst an:
www.sosindwir.de/webhorse/

Hoffe ihr könnt mir helfen....

Edit:
Sorry hatten grad nen kleinen Fehlern, die page kann man jetzt anschauen....

Ratespiel: Finde die URL!
 
Ich hab es schon gesehen,ich hab mich nur falsch ausgedrückt.Ich hätte schreiben sollen "trotzdem Prozentangaben zu benutzen".

Es sieht einfach blöd aus,wenn bei höheren Auflösungen oben ein 100px hohe Grafik ist.Sie wirkt dann etwas mickrig.Sollte man dann auch noch eine width Angabe in % haben,wird die Grafik gestreckt.Denn dann hat man für die Höhe eine feste Größe und die Breite hat eine fliessende Größe.
 
Gefunden! :)

Zuerstmal: du hast dich vertippt und "margin: autp" statt "margin: auto" geschrieben. Außerdem sollte dir klar sein, dass der IE damit seine Probleme hat.
Generell frage ich mich aber, warum du es dir so schwer machst. Entweder man erstellt seine Seite mit einer flexiblen Breite (was aufwendig ist) oder mit einer Festen. Wenn du dir schon die feste Breite ausgesucht hast, dann mach es dir leicht, erstell eine große Grafik (als Hintergrund) mit 2 <div>s, die du absolut positionierst. (eins für die Navi und eins für den Content)
 
Original von valenterry
Zuerstmal: du hast dich vertippt und "margin: autp" statt "margin: auto" geschrieben. Außerdem sollte dir klar sein, dass der IE damit seine Probleme hat.

Gibt es etwas mit das der keine Probleme hat?

Aber deine Lösung ist auch nicht schlecht.Wieso eine fliessende Höhe benutzen,wenn man eine feste Breite hat?
 
Schonmal was von float gehört? Da würde ich mal ansetzen. Ach ja, und dazu dann noch clear: both; benutzen und alles wird gut. Zum Zentrieren der Seite kannst Du z.B. margin: 20px auto; benutzen. Wobei der erste Wert den Abstand oben und unten angibt, der zweite den linken und rechten Abstand.
 
Original von BasicAvid
Zum Zentrieren der Seite kannst Du z.B. margin: 20px auto; benutzen.
Zum Zentrieren gibt es auch noch nen alten Trick. Der Vorteil dabei ist, dass selbst uralte Browser ihn verstehen. Das Ganze funktioniert so:
Code:
#box {
  width: 500px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -250px; <-- Hälfte von 500px
}

@DolphVS: Ich würde an deiner Stelle nicht mit height:100% arbeiten, sondern den Balken je nach Länge des Inhalts größer oder kleiner werden lassen.
 
Zurück
Oben