Question

这里是链接：

https://jsfiddle.net/Beginner_at_programming/73n4ez7q/

<!DOCTYPE html>
    <title>F-CropSap</title>

<body>

    <div data-role="page" id="home" data-theme="a">

        <div data-role="header" data-position="fixed">

            <h1>jQuery Mobile</h1>

        </div>

        <div data-role="content">
            <div class="container">
                <div class="row" align="center">
                    <div> <h5 align="center" id="headlabel">  </h5>  </div><br />

                    <div id="todoItems">
                    </div>
                </div>
            </div>
        </div>

        <div data-role="footer" data-position="fixed">
           <h1>jQuery Mobile</h1>
        </div>

    </div>

</body>

我无法找出哪个css部分我必须评论才能正常工作。我希望我的页脚固定在底部。任何人都可以建议做什么？

提前致谢

Answer 1

你可以添加位置固定属性使页脚固定

https://jsfiddle.net/73n4ez7q/1/

<!DOCTYPE html>
    <title>F-CropSap</title>

<body>

    <div data-role="page" id="home" data-theme="a">

        <div data-role="header" data-position="fixed">

            <h1>jQuery Mobile</h1>

        </div>

        <div data-role="content">
            <div class="container">
                <div class="row" align="center">
                    <div> <h5 align="center" id="headlabel">  </h5>  </div><br />

                    <div id="todoItems">
                    </div>
                </div>
            </div>
        </div>

        <div data-role="footer" data-position="fixed" style="position:fixed;"> <!-- Edit -->
           <h1>jQuery Mobile</h1>
        </div>

    </div>

</body>

使用jQuery Mobile和bootstrap时页脚不能正常工作

1 个答案: