CSS:div垂直固定,但水平移动
哎,, 以下是我正在尝试做的: 有一个固定大小的可滚动div,比如400x400 px。内部有两个div:header div和data div。它们的高度和宽度都是可变的。我想做的是能够水平滚动header和data div,但只能垂直滚动数据。换句话说,我希望header div垂直固定,但水平滚动,数据网格完全滚动。 以下是设置:CSS:div垂直固定,但水平移动,css,html,Css,Html,哎,, 以下是我正在尝试做的: 有一个固定大小的可滚动div,比如400x400 px。内部有两个div:header div和data div。它们的高度和宽度都是可变的。我想做的是能够水平滚动header和data div,但只能垂直滚动数据。换句话说,我希望header div垂直固定,但水平滚动,数据网格完全滚动。 以下是设置: <div style="height: 400px; width: 400px; overflow: scroll; position: static;"
<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:相对”
?
thx我的解决方案与您的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>
函数syncScrolls()
{
document.getElementById('header').scrollLeft=document.getElementById('data').scrollLeft
}
标题
谢谢我会用你的解决方案。不过在firefox上有点滞后。。从未想过……)