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
答
我的解决方法是从你的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>
+0
谢谢!会使用你的解决方案。 Firefox上有点迟缓,但是......从未想过......) – exp 2010-10-14 07:42:06
一条垂直线看起来是这样的:| 水平线看起来像这样: - 你似乎有两个混在一起。 – 2010-10-13 12:11:40
固定,谢谢.. – exp 2010-10-14 07:45:01