嘿， 这是我正在尝试做的事情: 有一个固定大小的可滚动 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 水平滚动，我需要它一直显示。
我真的不想用frame，那有没有可能用div来做呢？ mb，有一些属性，比如 style="position-y: fixed; position-x: relative" ？
谢谢
最佳答案
我的解决方案与您的 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>
关于CSS:div 垂直固定，但水平移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3923347/