html - 如何实现适用于桌面和移动设备的水平可拉伸(stretch)页面布局

Question

我尝试过使用表格、div 和其他东西，但到目前为止，在移动设备上查看完整的桌面网站时，我一直遇到各种问题。我有该站点的移动版本，但我仍然没有我想要内置的所有功能，因此我必须强制使用桌面站点选项来查看完整站点。我遇到的主要问题是，当我从站点缩小时，标题不会拉伸(stretch)并且不再居中。此外，页脚不会像我希望的那样停留在移动设备浏览器的底部。我使用 JQueryMobile 的移动网站确实位于底部，但在完整桌面网站的情况下则不然。有没有人可以分享类似的布局来实现我在下图中所拥有的，我可以重新开始？

Answer 1

我只能帮助您解决使用 jQuery Mobile 时出现的页脚问题。对我来说，有两种有效的解决方案:

1.

        <footer data-role="footer" style="position: absolute; bottom: 0; width: 100%">
            <!--footer goes just here-->
            <h1>Page Footer</h1>
        </footer>

2。

        <footer data-role="footer" data-position="fixed">
            <!--footer goes just here-->
            <!--footer will allways be displayed-->
            <h1>Page Footer</h1>
        </footer>