All geek questions in one place

CSS: div is fixed vertically but moves horizontally

Hey, here's what I'm trying to do: There is one scrollable div with a fixed size, say 400x400 px. Inside there are two divs: div div and data div. Their height and width vary. What I want to do is scroll horizontally both the headers and the data, but only the data vertically. In other words, I want the div title to be fixed vertically, but scrollable horizontally and the data grid is fully scrollable. here is the setting:

<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>

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 for the vertical scrollbar ... well ... it scrolls horizontally with my div div, I need it to display all the time.

, div? mb, ,   style = "position-y: fixed; position-x: relative"

+3
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>
+1

Source: https://habr.com/ru/post/1769330/

More articles:


All Articles