Php 在没有javascript的情况下滚动带有溢出的div

Php 在没有javascript的情况下滚动带有溢出的div,php,html,css,Php,Html,Css,我有一个静态高度的div,内容使用overflow:auto剪裁。在普通的桌面浏览器上,我使用javascript滚动到内容的底部。但是,我需要在移动浏览器或没有javascript的浏览器上执行同样的操作。不是实时的,而是以浏览器呈现内容底部的方式输出html+css 我可以使用的工具:HTML、CSS、PHP 这可能吗?事实上,在没有JavaScript的情况下可以实现这一点 您可以在可滚动div的底部放置一个锚定标记,然后在HTML页面中使用meta-refresh头请求重定向到此锚定。在

我有一个静态高度的div,内容使用
overflow:auto
剪裁。在普通的桌面浏览器上,我使用javascript滚动到内容的底部。但是,我需要在移动浏览器或没有javascript的浏览器上执行同样的操作。不是实时的,而是以浏览器呈现内容底部的方式输出html+css

我可以使用的工具:HTML、CSS、PHP


这可能吗?

事实上,在没有JavaScript的情况下可以实现这一点

您可以在可滚动div的底部放置一个锚定标记,然后在HTML页面中使用meta-refresh头请求重定向到此锚定。在这种情况下,浏览器不应该触发真正的页面刷新,因为只有散列部分会更改。它只需滚动到div底部的锚点

Google Chrome 4.0、Firefox 3.5.7、Safari 4.0.4、IE 7和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>

Lorem ipsum dolor sit amet,行政长官
但拉奥里特·多洛尔·麦格纳·阿利夸姆·埃拉帕特。乌特维西酒店
这是一家专门为客户提供服务的公司
我在亨德雷特市的一家百货公司,在一家工厂,
在维罗·厄洛斯和accumsan以及iusto-odio-Dignessim-qui没有设施
zzril delenit augue duis dolore te FEUGATE nulla facilisi。南自由
eleifend option congue nihil Diet doming id quod mazim

典型的非哈本语;iis中的est通常为法律依据 列克托雷斯·勒盖尔·勒吉斯·库德二世的调查 动态过程,即选择过程中的突变。 哥提卡、库姆·努克·普塔姆·克拉姆、前波斯特·利特拉姆 四分贝和五分贝。Eodem modo typi,qui nunc futurum的未婚妻Sollemens。洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图尔 不,不,不,不,不,不,不,不,不,不,不 维尼亚姆·诺斯特鲁德(veniam)是一名职业经理人 康塞奎特。乌尔普塔特的亨德雷特有两个家庭 克拉里塔坦。莱克托雷斯·勒盖尔·梅的调查演示。

这是一个不太可能的地方,一个不太可能的地方 每四分贝和五分贝的人道主义。Eodem modo 克拉丽,未来的未婚夫索勒姆斯

在Opera10.0中测试上述内容时,我发现元刷新有一个小问题,它显然将0解释为一个无限循环,和其他浏览器不同。类似的问题似乎也发生在IE for Windows Mobile 6中。我相信这可以通过某种方式解决。一种选择是提供带有锚标记的完整URL

我还用Safari在iPhone上测试了上述功能,它似乎工作正常


尽管如此,我不得不说,在移动浏览器中呈现完整的div内容而不进行任何内部滚动可能是一个更好的主意。移动浏览器中的多个滚动条似乎不是很有用。

请注意:PHP是一种服务器端语言,因此不希望以这种方式影响客户端呈现。非常聪明,这是一种很好的解决方法。请注意,元刷新会将一个条目添加到浏览历史记录中,有时尝试并单击返回上一页可能会很痛苦。我通常倾向于避免网站以这种方式劫持我的后退按钮。做得好:-)这是一个绝妙的解决方案,在现代浏览器上非常有效。太糟糕了,我想让它在一个浏览器上工作:Opera Mini:(