CSS: div fixed vertically, but movable horizontally
Hey, Here's what I am trying to do: There is one scrollable div with fixed size, say 400x400 px. Inside there are two divs: header div and data div. Both their height and width are variable. What I want to do is be able to scroll horizontally both header and data divs but vertically only the data. In other words, I want the header div be fixed vertically, but scrollable horizontally and data grid - fully scrollable. here's the setup:
<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: 100p开发者_运维技巧x; width: 800px; height: 2000px">
//data
</div>
</div>
I tried something like this:
<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>
it works fine, except vertical scrollbar is... well... scrolled horizontally with my data div, i need it to be shown all the time.
I really don't want to use frames, so is it possible to do this with divs? mb, there're some properties, like style="position-y: fixed; position-x: relative" ?
thx
My solution is a little different from your HTML but fulfills your requirements
<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>
加载中,请稍侯......
精彩评论