我的单页结构如下。
单击主页或订单或关于链接时 - 页面滚动以显示页面上的该部分:
<body style="height: 100%;">
...
<header id="home">
<li class="scroll"><a href="#home">Home</a></li>
<li class="scroll"><a href="#orders">Orders</a></li>
<li class="scroll"><a href="#about">About</a></li>
</header>
<section id="orders" style="min-height:100%; height:100%; background-color:#FFFFAA;">
...
</section>
<section id="about" style="min-height:100%; height:100%; background-color:#FFFFBB;">
...
</section>
<footer id="footer" style="position:absolute; bottom:0;width:100%;">
...
</footer>
</body>
当只有页眉部分可见时，页脚在第一次加载时正确显示。但是当点击 Orders 链接时，页脚会随着页眉部分一起 float ，就好像它是页眉部分的一部分一样。
最佳答案
我想你想要position: fixed:
html,
body {
min-height: 100%;
padding-bottom: 50px;
}
footer {
background-color: pink;
}<header id="home">
<li class="scroll"><a href="#home">Home</a>
</li>
<li class="scroll"><a href="#orders">Orders</a>
</li>
<li class="scroll"><a href="#about">About</a>
</li>
</header>
<section id="orders" style="min-height:500px; background-color:#FFFFAA;">
<h2>Orders</h2>
</section>
<section id="about" style="min-height:500px; background-color:#FFFFBB;">
<h2>About</h2>
</section>
<footer id="footer" style="position: fixed; bottom:0;width:100%;">
<h2>Footer</h2>
</footer>关于jquery - 页脚向上 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31481725/