Question

我想创建一个页脚，该页脚需要保留在每个屏幕的底部，但我这样做了，但问题是它在小型设备的横向视图上会中断，但在纵向视图上却可以正常工作。

  body, html {
    height: 100vh;
    position: relative;
  }

  .footer {
    background: #0066cc;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }

<div class="footer">
    <div class="content">
        <h4><small>Powered by</small> <img class="footer-img" src="images/logo.png" alt=""></h4>
    </div>
</div>

我希望它停留在每台设备的底部，并且也保持在横向！！

Answer 1

我已经用这段代码完成了它，它既位于横向页面上，也位于纵向页面上

-首先，我在容器（主div）上做了CSS

.container{
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
width: 100%; }

-秒我更改页脚CSS

.footer{
background: #0066cc;
position: absolute;
bottom: 0;
width: 100%; }

它解决了我的问题。

顺便说一句，您每次都不会遇到此问题，但是当页面页脚的内容不足时，它将留在原处，并且即使在Web视图上，您也会在其他设备上获得额外的空间，但是当您如果页面有足够的内容，那么页脚将始终停留在底部。

Answer 2

您只需要更改页脚的放置方式。如您所希望的那样，您可以使用fixed代替absolute。

body,html{
height: 100vh;}

.footer{
background: #0066cc;
position: fixed;
left: 0;
bottom: 0;
width: 100%; }

页脚在小型设备的景观视图上中断

2 个答案: