Home/ Questions/Q 616137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T18:17:40+00:00

I have a div with a static height, with content clipped using overflow: auto

  • 0

I have a div with a static height, with content clipped using overflow: auto. On regular desktop browsers I use javascript to scroll to the bottom of the content. However, I need to do the same on mobile browsers, or browsers without javascript. Not in real time, but to output html+css in such a way so as the browser renders the bottom of the content.

Tools at my disposal: HTML, CSS, PHP.

Is this possible?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is in fact a trick to achieve this without JavaScript.

    You can put an anchor tag at the bottom of your scrollable div, and then use the meta refresh header in your HTML page to request a redirect to this anchor. The browser should not trigger a real page refresh in this case, because only the hash part will change. It should simply scroll to the anchor at the bottom of the div.

    The following works in Google Chrome 4.0, Firefox 3.5.7, Safari 4.0.4, IE 7 and IE 8:

    <html>
<head>
    <meta http-equiv="refresh" content="0; url=#anchor-bottom" />
</head>
<body>
    <div style="overflow: scroll; height: 100px; width: 150px;">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
        ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
        iriure dolor in hendrerit in vulputate velit esse molestie consequat,
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
        zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
        eleifend option congue nihil imperdiet doming id quod mazim.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis 
        Investigationes demonstraverunt lectores legere me lius quod ii 
        processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
        gothica, quam nunc putamus parum claram, anteposuerit litterarum 
        seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
        fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer 
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
        veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
        claritatem. Investigationes demonstraverunt lectores legere me.</p> 

        <a name="anchor-bottom"></a>

        <p>Mirum est notare quam littera gothica, quam nunc putamus parum
        humanitatis per seacula quarta decima et quinta decima. Eodem modo 
        clari, fiant sollemnes in futurum.</p>
    </div>
</body>
</html>

    While testing the above in Opera 10.0, I found a slight issue with the the meta refresh, which apparently interprets the 0 as an infinite loop, unlike the other browsers. A similar problem seemed to happen in IE for Windows Mobile 6. I’m sure this can be tackled in some way. One option would be to supply the URL complete with the anchor tag.

    I also tested the above on the iPhone with Safari, and it appears to work fine.

    Nevertheless I have to say that it may be a better idea to render the full div content without any internal scrolling in mobile browsers. Multiple scrollbars in mobile browsers do not seem very useable.

    • 0