1

I am trying to arrange a group of divs on-top of each other. The top div must be static place in the top-left (width = 100%) and not affected by the vertical scrolling that the centre div will have. I works somewhat as I want, except that the container div also got a vertical scroll that I don't want. Now I have two overlapping vertical scrollbars, one for the container div and one for the centre. I also use JQuery mobile on the page if that could help me arrange the divs.

How can I make my centre div (id=scroll) the only div that is scrollable and have my top div (id=fixed) at a fixed position without a scrollbar (no overlap of vertical scrollbars) and not be affected by page scrolling?

<div id="conatainer" style="overflow: hidden; height: 100%">


    <div id="fixed" style="position: static; top: 0%; overflow: hidden; height: 50%">

        <div id="map_canvas" style="width:100%; height: 85% ;min-height: 180px">

        ...

    </div>  


    <div id="scroll" style="position: absolute; overflow: auto; overflow-x: hidden; height: 50%">

    ...

    </div>

</div>
Chris
  • 712
  • 3
  • 16
  • 39

1 Answers1

1

This is a standard jQuery Mobile template with a fixed header and content that scrolls: http://jsfiddle.net/Gajotres/yWTG2/

<div data-role="page" id="index">
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

And here's a working example: http://jsfiddle.net/Gajotres/Rf7NA/

For a header to be fixed it needs data-position="fixed" attribute.

Also in case you WANT to use only a layout and not jQuery Mobile styling take a look at this ARTICLE or find it HERE: Search for the chapter: Methods of markup enhancement prevention.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • I am using xhtml (Primeface Mobile 0.9.3) that is using jQuery mobile. How can add the not standard 'data-role' and 'data-position' attribute ? – Chris Mar 19 '13 at 09:26
  • What is a nonstandard 'data-role' and 'data-position' attribute in this case? – Gajotres Mar 19 '13 at 09:29
  • Maybe its only my editor that does not recognize that attributes, will add them and see what happens. – Chris Mar 19 '13 at 09:38
  • It is your editor. A lot of them dont know how to detect modern HTML5 data and aria attributes. – Gajotres Mar 19 '13 at 09:40
  • In the fiddle example, I just added the `data-position="fixed"` to make the 'First Page' header static. Right ? – Chris Mar 19 '13 at 09:43
  • Yes, you can remove it and see what will happen. Same thing goes for a footer if you ever gonna use it. – Gajotres Mar 19 '13 at 09:44