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垂直固定，但水平移动

回答

相关问题