CSS: div vertikal fest, aber beweglich horizontal

Hey,
Hier ist, was ich versuche zu tun:
Es gibt ein scrollbares div mit fester Größe, sagen 400x400 px. Im inneren gibt es zwei divs: - header-div und Daten, div. Sowohl in Ihrer Höhe und Breite sind variabel. Was ich tun möchte, ist in der Lage sein, um horizontal zu scrollen beiden header-und Daten-divs aber vertikal nur die Daten. In anderen Worten, ich möchte das header-div fixiert werden vertikal, aber horizontal scrollbare und Daten-grid - voll Scrollbar.
hier ist das setup:

<div style="height: 400px; width: 400px; overflow: scroll; position: static;" >
<div style="z-index: 7500; position: fixed; height: 100px; width: 800px">
    //header
</div>
<div style="poxition: relative; top: 100px; width: 800px; height: 2000px">
    //data
</div>
</div>

Habe ich versucht, etwas wie dieses:

<div style="height: 400px; width: 400px; overflow: scroll; overflow-y: hidden; position: static;" >
<div style="z-index: 7500; height: 100px; width: 800px; position: relative">
    //header

<div style="height: 400px; width:auto; overflow: scroll; overflow-x: hidden; position: static;" >
    <div style="position: relative; top: 100px; width: 800px; height: 2000px">
        //data
    </div>
</div>

es funktioniert gut, außer die vertikale scrollbar ist... naja... horizontal gescrollt mit meinen Daten div, ich brauche es, gezeigt zu werden alle Zeit.

Ich wirklich nicht wollen, frames zu verwenden, so ist es möglich, dies zu tun mit divs? mb, es sind einige Eigenschaften, wie
style="position-y: fixed; position-x: relative"
?

thx

Eine vertikale Linie sieht wie folgt aus: | Eine horizontale Linie sieht wie folgt aus: - Sie scheinen zu haben, die beiden vermischt.
behoben, danke..

InformationsquelleAutor exp | 2010-10-13

  1. 1

    Meine Lösung ist ein wenig anders als HTML, sondern erfüllt Ihre Anforderungen

    <HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    function syncScrolls()
    {
        document.getElementById('header').scrollLeft = document.getElementById('data').scrollLeft
    }
  </SCRIPT>
 </HEAD>

 <BODY>
 <div style="height: 100px; width: 400px; overflow: scroll; overflow:hidden" id="header">
     <div style="z-index: 7500; height: 100px; width: 800px; border: solid 1px green;">
            header
    </div>
</div>
  <div style="height: 400px; width: 400px; overflow: scroll; position: static;" onscroll="syncScrolls()" id="data">
    <div style="poxition: relative; top: 100px; width: 800px; height: 2000px; border: solid 1px green"">
        data
    </div>
</div>
 </BODY>
</HTML>
    danke! gonna verwenden Sie Ihre Lösung. Ein bisschen laggy auf firefox, obwohl.. nie gedacht.. )

    InformationsquelleAutor Gaurav Saxena

Schreibe einen Kommentar