Vra

kop, voet en zijbalken het vaste posisie. In die sentrum 'n inhoud area met beide scroll bars. Geen buitenste scroll bars op die leser. Ek het 'n uitleg wat werk in IE7 en VF. Ek moet IE6 ondersteuning toe te voeg. Hoe kan ek hierdie werk doen?

Hier is 'n benadering van my huidige CSS. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <title>Layout</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

    .sample-border {
      border: 1px solid black;
    }

    #header {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 60px;
    }

    #left-sidebar {
      position: absolute;
      top: 65px;
      left: 0px;
      width: 220px;
      bottom: 110px;
    }

    #right-sidebar {
      position: absolute;
      top: 65px;
      right: 0px;
      width: 200px;
      bottom: 110px;
    }

    #footer {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      height: 105px;
    }

    @media screen {
      #content {
        position: absolute;
        top: 65px;
        left: 225px;
        bottom: 110px;
        right: 205px;
        overflow: auto;
      }
      body #left-sidebar,
      body #right-sidebar,
      body #header,
      body #footer,
      body #content {
        position: fixed;
      }
    }
  </style>
</head>

<body>
  <div id="header" class="sample-border"></div>
  <div id="left-sidebar" class="sample-border"></div>
  <div id="right-sidebar" class="sample-border"></div>
  <div id="content" class="sample-border"><img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;" /></div>
  <div id="footer" class="sample-border"></div>
</body>

</html>
Was dit nuttig?

Oplossing

Kan overkill wees vir jou projek, maar Dean Edwards 'IE7 javascript voeg ondersteuning vir vaste posisie te IE6 .

Ander wenke

Voeg die volgende kode om die <head> 

<!--[if lte IE 6]>
<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
.ie6fixed {
    position: absolute;
}
</style>
<![endif]-->

Voeg die ie6fixed CSS klas om alles wat jy wil word position: fixed;

Hierdie antwoorde was behulpsaam en hulle het laat my 'n beperkte vorm van vaste posisie te IE6 egter nie een van hulle het die fout wat my uitleg in IE6 breek los as ek spesifiseer beide 'n top en 'n onderste css eiendom vir my zijbalken voeg ( wat is die gedrag wat ek nodig het).

Sedert boonste en onderste nie kan gespesifiseer word, gebruik ek bo en hoogte. Die hoogte eiendom blyk baie nodig te wees. Ek gebruik JavaScript om die hoogte herbereken wanneer die bladsy laai en vir enige grootte.

Hier is die kode wat ek bygevoeg om my toetssaak om dit te kry om te werk. Dit kan baie skoner wees met jQuery. 

<!--[if lt IE 7]>
<style>
body>div.ie6-autoheight {
  height: 455px;
}
body>div.ie6-autowidth {
  right: ;
  width: 530px;
}
</style>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<script type="text/javascript">

function fixLayout() {
   if (document.documentElement.offsetWidth) {
      var w = document.documentElement.offsetWidth - 450;
      var h = document.documentElement.offsetHeight - 175;
      var l = document.getElementById('left-sidebar');
      var r = document.getElementById('right-sidebar');
      var c = document.getElementById('content');

      c.style.width = w;
      c.style.height = h;
      l.style.height = h;
      r.style.height = h;
   }
}
window.onresize = fixLayout;
fixLayout();
</script>
<![endif]-->

check die suiwer css hacks hieronder ... sommige vereis dwing dit in eienaardighede af (ek dink dit is die mees omvattende), maar al die werk regtig goed:

http://ryanfait.com/resources/fixed-positioning- in-die internet-ontdekkingsreisiger / http://tagsoup.com/cookbook/css/fixed/

Ek het hierdie gebruik tot groot effek, hoop dit help!

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top