min-Height auf Bildschirmgröße

html.de-Forum HTML, XHTML & CSS
1

Hi!
Ich überlege nun schon eine Weile, wie ich es hinbekomme, dass meine HP immer an den Bildschirm angepasst wird. Mein Problem ist nämlich, dass ich meinen Hintergrund durch 3 Divs zusammensetze, da ich das Bild nicht ziehen möchte. Wenn der Text der Seite jetzt allerdings nicht über die Bildschirmhöhe geht, wird das Hintergrundbild nicht ganz angezeigt. Bisher habe ich keine Möglichkeit gefunden nun das innere Div (in dem das eigentliche Hintergrundbild definiert ist) auf die Bildschirmhöhe anzupassen. Wäre schön, wenn da jemand anders weiter weiß.
Schonmal danke für die Antwort.
Lg One-Man-Army

2

ähhhm öhhh vielleicht mit position:absolute;

3

Hallo.

@BDG: Wenn du hier herumräts hilft das den Fragestellenden wenig, im Gegenteil du gibst sogar noch falsche Informationen.

@One-Man-Army: height: 100% könnte dein Problem lösen. Da ich aber deinen Code nicht kenne kann ich dir auch nicht sagen wo du das setzten musst.

Anmerkung: Das passt deine Webseite auf die Viewporthöhe an. Bei kleinen Viewports kann es trotzdem sein das dein Hintergrundbild abgeschnitten ist.

Gruss
Elroy

4

Beeinflussen könnte man das mit einem Div mit height:100% und einem Div in diesem Div mit einer festen Höhe bzw. einer Mindesthöhe. Dann wird die Seite auch nur bis zu diesem Div verkleinert und nicht weiter.

5

Ok. Erst schonmal danke.
Das mit dem height:100%; habe ich bereits ausprobiert, allerdings hat das nichts geändert.
Dass das Bild bei kleineren Bildschirmen abgeschnitten wird, ist so vorgesehen.

Der HTML-Code:

[CODE]

TEST
[/CODE]Hier der CSS-Code:

[CODE]
HTML {
border:none;
background-image:url(„BG-Image-Blue2(verticalLine).jpg“);
background-repeat:repeat-y;
background-position:center;
background-color:#01CED9;
}

#bg {
max-width:2000px;
border:none;
background-image:url(„BG-Image-Blue2(gross).jpg“);
background-position:center top;
background-repeat:no-repeat;
}

body {
border:none;
background-image:url(„BG-Image-Blue2(horizontalLine).jpg“);
background-position:top;
background-repeat:repeat-x;
background-color:transparent;
}

#Footer{
border:#F00 solid; /* Entfernen */
}

#Header {
height:150px;
background-color:#FFF;
border:#F00 solid; /* Entfernen */
}

#middle {
width:900px;
background-color:#FFF;
border:#F00 solid; /* Entfernen */
}

#SideMenue {
width:170px;
height:inherit;
border:#F00 solid; /* Entfernen */
}

#Main {
width:710px;
height:inherit;
border:#F00 solid; /* Entfernen */
}

#Window {
width:900px;
background-color:#FFF;
text-align:center;
border:none;
height:100%;
}

.links {
float:left;
}

.rechts {
float:right;
}

[/CODE]Zur Erklärung:
Das ist das Grundgerüst der Seite. Den Text habe ich mal entfernt, sonst würde es zu viel werden :wink: Mein problem tritt in dem Container Window auf. Dieser soll über den gesamten Bildschirm gehen und einen weißen Hintergrund haben. Die „border“-befehle habe ich nur reingeschrieben, damit es für mich besser erkenntlich ist, welcher Container wie weit geht. Jetzt ist nur das problem, dass Window scheinbar hinter dem Header verschwindet und ich bei meinen Versuchen keinen Unterschied daran sehe. Vielleicht seht ihr ja jetzt mit Quellcode ein bisschen mehr. Eine Ansicht der Seite kann ich euch jetzt leider nicht liefern, da die Seite noch nicht online steht. Ich bin aber dran es auf meine HP hochzuladen. Wenn das klappt meld ich mich nochmal.

P.S.: Die Änderungen an HTML, Body und dem Container bg braucht ihr nicht beachten, das ist nur die fummelei mit dem Hintergrundbild. Das funktoniert so weit. Ich muss nur noch den richtigen Doctype finden :smiley:

6

Ok. Ich muss noch was hinzufügen :smiley:

Und zwar habe ich beim reinschreiben etwas geändert. Wodurch nun das Window zumindest schonmal an das bg angepasst wird. Allerdings bleibt es dann wirklich bei der größe und wenn der Text drüber hinausgeht bleibt es trotzdem bei dieser Höhe. Durch min-height habe ich gerade nicht hinbekommen. :frowning: