CSS：div 垂直固定，但水平可移动答案

【问题标题】：CSS: div fixed vertically, but movable horizontallyCSS：div 垂直固定，但水平可移动
【发布时间】：2010-10-13 11:59:02
【问题描述】：

嘿，这是我想做的事情：有一个固定大小的可滚动 div，比如 400x400 像素。里面有两个div：header div和data div。它们的高度和宽度都是可变的。我想要做的是能够水平滚动标题和数据div，但只能垂直滚动数据。换句话说，我希望标题 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="位置-y：固定；位置-x：相对" ?

谢谢

【问题讨论】：

标签： css html

【解决方案1】：

我的解决方案与您的 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>

【讨论】：

谢谢！会使用你的解决方案。 Firefox 有点滞后，不过.. 没想到..)