✔ Content + Footer Scrollproblem

Status
Nicht offen für weitere Antworten.
Hab jetzt ein zusätzliches DIV eingefügt mit overflow: auto und das beinhaltet jetzt Content und Footer.

Hier der CSS-Code:
HTML: 
#scrollbereich {
  overflow: auto;
}

Und hier die Stelle im HTML-Code:
HTML: 
<div id="header">
...
</div>
<div id="scrollbereich">
  <div id="content">
    ...
  </div>
  <div id="footer">
    ...
  </div>
</div>

Aber geändert hat sich deswegen nichts. Es scrollt immer noch alles mit.
 
In diesem Fall wird wohl der Viewport (html,body) gescrollt, und nicht das DIV#scrollbereich.
 
Hab nochmal bei SelfHTML gesucht und bin jetzt soweit, dass der Header fest bleibt, allerdings wird im IE der untere Teil abgeschnitten. Der Scrollbalken hört nicht am unteren Browserrand auf, sondern viel weiter unten.

Siehe hier:
falscher Scrollbalken

Wenn nicht genug Inhalt zum Scrollen da ist, ist auch der Footer gar nicht mehr sichtbar. Weder am unteren Browserrand, noch sonst wo.

Im Firefox funktioniert es.
 
Im Firefox überdeckt der Header die ersten Zeilen des Textes, und wie's im IE aussieht, brauche ich ja nicht mehr zu erwähnen.

Wie ich dir aber schon gestern schrieb, lässt sich dein Vorhaben nicht umsetzen.

Hier mal ein alternatives CSS-Modell mit feststehendem Header und Footer:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body
{
overflow: hidden;
}

div.wrapper
{
position: absolute;
left: 50%;
margin-left: -300px;
width: 600px;
top: 0;
height: 100%;
border: 1px solid #dfdfdf;
}

div.head
{
position: absolute;
left: 0;
top: 0;
width: 600px;
height: 50px;
background: #dfdfdf;
}

div.scrollBox
{
position: absolute;
top: 50px;
bottom: 20px;
left: 0;
width: 600px;
/* nur für IE: */
height: expression((document.body.clientHeight - 72) + "px");
                                 /* top-Wert + bottom-Wert + border-Wert DIV.wrapper = 72 */
overflow: auto;
}

* html div.scrollBox
{
width: 598px;
}

div.foot
{
position: absolute;
left: 0;
bottom: 0;
width: 600px;
height: 20px;
background: #dfdfdf;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="head">head</div>

     <div class="scrollBox">

               <h1>content</h1>
               <p>dummy text 1</p>
               <p>dummy text 2</p>
               <p>dummy text 3</p>
               <p>dummy text 4</p>
               <p>dummy text 5</p>
               <p>dummy text 6</p>
               <p>dummy text 7</p>
               <p>dummy text 8</p>
               <p>dummy text 9</p>
               <p>dummy text 10</p>
               <p>dummy text 11</p>
               <p>dummy text 12</p>
               <p>dummy text 13</p>
               <p>dummy text 14</p>
               <p>dummy text 15</p>
               <p>dummy text 16</p>
               <p>dummy text 17</p>
               <p>dummy text 18</p>
               <p>dummy text 19</p>
               <p>dummy text 20</p>
               <p>dummy text 21</p>
               <p>dummy text 22</p>
               <p>dummy text 23</p>
               <p>dummy text 24</p>
               <p>dummy text 25</p>

     </div><!-- end DIV.scrollBox -->

     <div class="foot">foot</div>

</div><!-- end DIV.wrapper -->

</body>
</html>
 
Außer im IE funktioniert es überall.
Da werd ich jetzt wahrscheinlich Header und Footer feststehend machen.

Danke für die Hilfe.

Viele Grüße,
Ines
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück