Problem mit height & width 100% Seitenaufbau mit div beim ändern der Bildschirmgröße

tinchern06

Mitglied
Hallo, ich habe folgendes Problem:

meine Seite soll sich immer dynamisch an die Bildschirmgröße anpassen. Das tut sie auch bis zu einer gewissen Bildschirmgröße und dann treten Fehler auf.
Seitenaufbau:
#header (soll 100% width sein, feste Höhe)
#leftbox (flexible Breite, 100% hoch, beinhaltet ein Bild welches am unteren Rand ausgerichtet ist und sich flexibel der Box anpasst)
#boxright (2 Spalten ->content1 (menue)->content2(inhalt)auch flexible Breite)
Wie gesagt funktioniert soweit bis die Bildschirmgröße verkleinert wird und boxright gescrollt werden muß, dann passt sich die boxleft nicht mehr 100% in der Länge an (hört auf ab Scrollbereich) Das sieht natürlich blöd aus weil das bild dann nicht mehr unten ausgerichtet ist sondern mitten drin hängt. Der Kopfbereich schafft keine 100% Weite bei kleiner Bildschirmgröße. Ich hoffe ich habe das einigermaßen anschaulich beschrieben :-(
Hier mal der Code css
HTML:
html, body {
 height:100%;
 width:100%; min-width:100%;

}

body {

     font-family: Verdana,Arial,Helvetica;
     background: rgb(161,13,89);
     font-size: 0.76em;
     color:rgb(248,243,233);
     margin: 0 0 0 0;
     padding:0;
      }

#head{
     position: absolute;
     width:auto;
     min-width:100%;
     height:170px;
     background-color:rgb(216,228,255);
     left: 0px;
     top: 0px;
     margin:0px;
     text-align: left;
     white-space: nowrap;
     vertical-align: top;
     overflow:visible;
     z-index: 14;
}

#boxleft {
  position: absolute;
  left: 0px;
  width: 18%;
  min-width:180px;
  min-height:100%;
  height:100%;
  margin: 0 0 0 0;
  top: 0px;
  bottom:0;
  background-color:rgb(216,228,255);
  z-index:2;
   }

 #boxright{
     position: absolute;
     right: 0px;
     top: 200px;
     width:82%;
     margin:0;
     padding:0 0 0 0;
     z-index: 2;


}
#content1{
     position:absolute;
     width: 200px;
     text-align:left;
     line-height: 1.9em;
     font-weight:300;
     font-size: medium;
     white-space: nowrap;
     padding:4em;
     z-index: 3;
}

#content2, .content2{
     position: absolute;
     left:300px;
     padding-left:5em;
     padding-right:5em;
     line-height: 1.9em;
     font-weight:300;
     font-size: medium;
     text-align:justify;
     overflow: auto;
     height: 500px;
     padding-right: 2em;
     z-index: 3;

}

Code Html
HTML:
<div id="head"><img src="images/logo.gif" alt="" border="0"></div>
<div id="boxleft" ><div class="bg_img"><img src="images/foto.jpg" alt="Foto" border="1"></div> </div>
<div id="boxright">
<div id="content1">...
  
</div>
<div class="content2">... </div>
</div>

Ich hoffe jemand hier kann mir helfen
Danke im Voraus
Gruß tinchern06
 
Hallo, war ein paar Tage unterwegs, aber jetzt habe ich wieder Zeit.
Danke erst mal für die Links. Habe beide ausprobiert. Leider funktionieren sie auch nicht 100%.

Das Problem:

wenn ich dem wrapper die Hintergrundfarbe des Bildes gebe, dann fuktioniert das mit dem Bild, aber Inhalt und Navi haben dann eine automatische Höhe (bei festgelegten 100% muß gescrollt werden oder kann ich von den 100% die feste haeder Höhe wieder abziehen?)
oder
wenn ich dem wrapper die Hintergrundfarbe von Navi und Inhalt gebe hat das Bild logischerweise beim verkleinern der Seite auch diese Hintergrundfarbe.

Weiterhin habe ich gelesen, dass realtive positionierung nicht umbedingt verwendet werden sollte. (position: realtiv und float:left, wie hier verwendet ist das sinnvoll?)

Wahrscheinlich lässt sich das ganze nur in Form einer Tabellenstruktur mittels divs lösen****? Oder hat jemand eine andere Idee.

also meine Idee wäre: im wrapper 2 div's in

1. div (haeder width 100%, height 20%)
2. div (conten width 100% height 80% margin-top: 20%,mit link, navi und inhalt div)
also, wie Tabelle

Aber das geht doch bestimmt irgendwie einfacher? Leider bin ich noch nicht richtig fit in css, habe grundlegende Kenntisse aber die sind alle ganz schön eingerostet nach längerer Abstinenz.

Ich probiere das jetzt mal aus, vielleicht kennt jemand ein fertiges Style in diese Richtung oder hat eine andere Idee.

Ich hoffe ihr habt auf meine Fragen ein paar Antworten. Ich würde mich darüber sehr freuen. Bis dahin
Gruß tinchern06
 
Also, ausgehend von deiner Eingangfrage sind doch in der 2. Demo alle bedingungen erfüllt ?
Übrigens kannst (musst) du für deine Hintergrundfarben die Faux Column Methode anwenden. Wie in der 2. Demo zu sehen ist.
 
Zuletzt bearbeitet:
Hallo,

danke für deine Antwort. Habe es gerade noch mal getestet und kapiert. Läuft mit dieser Methode ganz gut. Das Bild, welches ich unten einsetzen möchte müßte ich dann um die gleichen Prozentangaben minimieren, da es sich ja sonst nicht dynamisch angepasst. Aber das wird sich wohl realisieren lassen. Das werde ich dann jetzt mal noch testen und dann hoffentlich, dank der netten Hilfe das Thema beenden können.
Gruß tinchern
 
Na siehst'e. Im Style brauchst du für dein Foto nur eine Przentangabe für width. Somit passt sich das Bild immer am linken Außenabstand von #mitte an


#wrapper img {
position:absolute;
bottom:0;
width:20%;
}

#mitte {
position:relative;
margin-left:20%;
}


So klappt's bestimmt

mfg
 
Guten Abend,

so nun habe ich das Bild im wrapper eingebaut und deine Ratschlägen befolgt. Das klappt auch bis zu einer gewissen Bildschirmauflösung.

Solange bis die Höhe des Bildes nicht die Höhe des #div=mitte unterschreitet. Dann wird sichtbar, daß 20% des Hintergrundbildes (1400px width), nicht gleich 20% des Bildes im wrapper (250px width) entsprechen.

Eine Idee wie ich das umgehen kann?
Gruß tinchern06
 
Ich kann dir im Moment nicht ganz folgen.

Das Demo Foto hat eine Größe von 500 x 375 Pixel. Bei einer theoretischen maximalen Auflösung von 2000 x 1080 Pixel
wären es 20% von 2000px = 400px
Bei einer Fensterverkleinerung auf bspw. 1000px wäre das Foto dann 200px x 150px als 20% vom linken Außenabstand.
Das Demo funktioniert bei mir bei einer Auflösung von 1920 x 1080px bis zum min-width von 760px ( 152px x 106.4px) ohne Probleme
Ein Testcase wäre nicht schlecht.
 
Zurück