• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Falsche Scrollfunktion nach Aktualisierung

S

snash00

Neues Mitglied
Habe ein Fenster mit fixer Kopf und Fußzeile erstellt und den Container als Scrollbereich ausgeführt. Sobald ich jedoch im Opera beispielsweise ganz nach unten scrolle, und die Seite aktualisiere, springt mir die Kopf- und Fußzeile um den zuvor gescrollten Bereich nach oben. Erst nach erneuten nach oben scrollen "rasten" Kopf- und Fußzeile wieder ein. Kennt hier jemand eine einfache Lösung.
Bin hier zwar noch etwas neu, konnte aber nach langem Suchen immer noch nichts passendes finden ...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Unbenanntes Dokument</title>
    
    <style>
body {
    margin:0;
    padding:0;
    background:#CCCCCC}

/*-------------------- Kopfzeile --------------------*/
#header {
    position:fixed;
    top:0px; left:0px; right:0px;
    width:900px;
    margin:0 auto;
    padding-bottom:0.5em;
    background-color:#ffffff}

/*____ TOPMENU ____*/
#topmenu {
    margin: 0 auto;
    width:900px;
    height: 2.2em;
    margin-bottom:0.6em;
    background-color: #595660;
    color:#FFFFFF}
/*------------------ Kopfzeile_END ------------------*/


/*-------------------- Fußzeile --------------------*/
#footer {
    position:fixed;
    bottom:0px; left:0px; right:0px;
    width:900px;
    margin:0 auto;
    padding-top:0.5em;
    background-color:#ffffff}

#footer_cont {
    width:900px;
    height: 2.2em;
    background-color:#595660;
    color: #FFFFFF}
/*------------------ Fußzeile_END ------------------*/


/*------------------- CONTENT --------------------*/
#content_container {
    width:900px;
    margin:0 auto;
    padding-top:3em;
    padding-bottom:3em;
    padding-left:0;
    background:#ffffff}

#content {
    }
/*----------------- CONTENT_END ------------------*/


/* Angaben nur für den Internet Explorer mit Star HTML Hack */
/*__________________noch nicht überarbeitet__________________*/
* html, * html body {
    height:100%;
    overflow:hidden}

* html #header {
    margin:0;
    height:10%;
    background-color:#ffffff}

* html #content_container  {
    padding:0.5em;
    height:82%;
    overflow:auto}

* html #footer  {
    height:8%;
    padding-top:3.5%;
    background-color:#ffffff}

* html div#content {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
    padding-top:1em}


/*--------------------- TEXT ---------------------*/
* {
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:1em;
    line-height:150%;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none}

p {
    font-size: 87.5%}
/*------------------- TEXT_END -------------------*/
    </style>
    
</head>

<body>
  <div id="header">
    <div id="topmenu">
      Kopfzeile
    </div>    <!-- End Topmenu -->
  </div>    <!-- End Header -->

  <div id="content_container" class="con_top1">
    <div id="content">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
            <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</p>
            <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>
        
    </div>
  </div>


  <div id="footer">
    <div id="footer_cont">
        Fusszeile
    </div>
  </div>

</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Deinem HTML-Code fehlen ein paar Code-Zeilen?! Doctype..?

Passiert das auch in anderen Browsern?

Kann man sich das irgendwo anschauen?
 
da hab ich wohl ein paar zeile vergessen zu kopieren :)

Firefox und IE machen soweit keine Probleme. Konnte das nur bis jetzt bei Opera beobachten.

Kann leider momentan nichts hochladen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben