CSS：div垂直固定，但水平移動

嘿，這是我想要做的：有一個固定大小的可滾動div，比方說400x400像素。裏面有兩個div：header div和data div。它們的高度和寬度都是可變的。我想要做的是能夠水平滾動標題和數據div，但只能垂直滾動數據。換句話說，我希望header div垂直固定，但是可以水平滾動和數據網格 - 完全可滾動。這裏的設置：CSS：div垂直固定，但水平移動

<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>

我想是這樣的：

<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>

它工作正常，但垂直滾動條......好水平與我的數據滾動div，我需要它始終顯示。

我真的不想使用框架，所以有可能使用div做到這一點？ MB，有一些屬性，如 style =「position-y：fixed; position-x：relative」？

THX

來源

2010-10-13 exp

一條垂直線看起來是這樣的：| 水平線看起來像這樣： - 你似乎有兩個混在一起。 – 2010-10-13 12:11:40

固定，謝謝.. – exp 2010-10-14 07:45:01

我的解決方法是從你的HTML稍有不同，但滿足您的要求

<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>

來源

2010-10-13 19:21:36

謝謝！會使用你的解決方案。 Firefox上有點遲緩，但是......從未想過......） – exp 2010-10-14 07:42:06

CSS：div垂直固定，但水平移動

回答

相關問題