Question

我有如下单页结构。
单击主页或订单或关于链接时 - 页面会滚动显示页面上的该部分：

<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链接时，页脚会随着标题部分一起浮动，就像它是标题部分的一部分一样。

Answer 1

我想你想要position: fixed：

＆＃13;

html,
body {
  min-height: 100%;
  padding-bottom: 50px;
}
footer {
  background-color: pink;
}

＆＃13;

<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>

＆＃13;

页脚正在浮动

1 个答案: