✔ overflow: auto, geht nicht mit height= % ?, Text läuft über seite hinaus

T

tinchern06

Mitglied
Hallo Zusammen,

habe folgendes Problem:
habe ein HP erstellt die sich dynamisch der Fenstergröße anpassen soll.
Das funktioniert auch, bis der Text größer als die Fenstergröße ist oder das Homepagefenster verkleinert wird.

Habe jetzt ein overflow:auto versucht zu setzen. Da aber die Seite mit %- Angaben läuft bekomme ich das nicht hin. 100% wird nicht angezeigt und bei einem overflow :auto mit height 500px läuft beim verkleinern der Seite der scroolbereich über die Seite hinaus.
Hier mal der code
HTML: 
<style type="text/css">
* {
 margin:0 0 0 0;
 padding:0 0 0 0;
 border:none;

}


html , body  {
 height:100%;
 font-family: Verdana,Arial,Helvetica;
 font-size: middle;

}

#wrapper {
 position:relative;
 width:100%;
 min-width:760px;
 min-height:100%;
 float:left;
 margin:0 0 0 0;
 left:0;
 background:url(images/wrapper.gif) repeat-y 20% ;
}

#header {
 position: absolute;
 margin:0 0 0 0;
  height:22%;
  width:100%;
  max-width:100%;
  background:rgb(216,228,255);
  z-index:10;
}
#header img {
position:absolute;
top:10px;
left:10px;
bottom:0;
width:35%;
}

#links {
 position:absolute;
 bottom:0;
 margin-left:0;
 width:20%;
 background:rgb(216,228,255);
 height:100%;
 z-index:1;

}
#links img {
position:absolute;
bottom:0;
width:100%;
}

#mitte {
 position:absolute;
 margin-left:20%;
 top:22%;


}

#navi {
 width:200px;
 float:left;

}

#inhalt {
 margin-left:200px;
 line-height: 1.9em;
 font-weight:300;
 font-size: medium;
 text-align:justify;
 }

 #content2{

 line-height: 1.9em;
 font-weight:300;
 font-size: medium;
 padding-right:20px;
 text-align:justify;
height:500px;
 overflow: auto;
}


</style>

</head>
<body>

<div id="wrapper">


 <div id="header">Hier steht das Logo</div>

<div id="links">Foto </div>
 <div id="mitte">

  <div id="navi">   </div>

  <div id="inhalt"> <div id="content2">Hier ein langen Blindtext einfügen zum Test
</div>
</div>


 </div> <!-- Ende Mitte -->
</div> <!-- Ende Wrapper -->
Hier mal eine Testseite: Seite enfernt
Ich hoffe ihr könnt mir helfen. Vielleicht sehe ich ja mal wieder dem Wald vor Bäumen nicht
LG tinchern06
 
Zuletzt bearbeitet:
Hi,du hast mit den 100% ein Problem weil sich die Höhe 100% auf de nInhalt des DIV bezieht und nicht darauf wie groß das Browserfenster ist. Hier verhält sich der FF etc. richtig und der IE falsch!
Das Verständnis für dieses Verhalten ist oftmals beim CSS-Schreiberling auch falsch vorhanden weshalb viele meinen der iE würde es richtig machen :).
Wie du das Div hin bekommst das es sich am Browerfenster orientiert kannst du hier: nachlesen:http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html

Ansonsten wenn du eine Webseite haben möchtest die sich dynamisch anpassen kann so solltest du dich auch mal mit der relativen Größenangabe em befassen und auch das CSS-3 Thema Medie-Queries könnte für dich interessant sein. Da gibt es auch schon vorgefertigte CSS-Dateien für.

Viele Grüße
 
Guten Abend,

habe mir die Seite angesehen und die fehlenden Code eingefügt. Funktioniert super, der Text wird jetzt abgeschnitten. Eigentlich ganz simpel, aber auf hidden im wrapper wäre ich wahrscheinlich nicht so schnell gekommen. Mit dem Elter/Tochterelemt Regel konnte ich auch die % Angaben bei overflow einfügen, so daß jetzt alles perfekt ist.

Ja ich weiß das em Angaben nötig sind, habe ja auch schon damit angefangen und werde dies auch noch ändern.

Vielen, Vielen Dank für die Hilfe
LG tinchern06
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück