Question

我正在用电子构建Angular应用。该应用全屏打开。而且我有一个要求，页脚必须始终留在页面底部。尽管用户以不同的分辨率打开了此应用。

页脚是“内部版本于20200309发布。”

我所附的图片显示页脚不完全位于页面底部。

代码段

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<div class="footer">
  <p>Build was published on 20200309.</p>
</div>

我尝试了两种CSS样式，但都没有为我工作 app.component.css

.footer {
    margin-bottom: 0px !important;
}

app.component.css

.footer {
    /* margin-top: 25px; */
    margin-right: 1280px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 160px;
    align-items: flex-end;

}

但是当我使页脚显示柔韧性并且屏幕分辨率发生变化时，它不会在页面底部显示页脚。

我的CSS不够好，尽管屏幕分辨率改变了应用程序窗口的大小，但是有人可以帮助我让页脚在页面底部对齐吗？

图像1在屏幕底部显示页脚

更改屏幕大小后，图像2显示，您可以看到页脚位置已更改

Answer 1

为此只需尝试position: relative和bottom: 0，

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 160px;
    align-items: flex-end;
    position: relative;
    bottom: 0;
    margin: 0;
}

<div class="main">
  <div style="text-align:center">
    <h1>
      Welcome to Angular!
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  </div>
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
  </ul>

  <div class="footer">
    <p>Build was published on 20200309.</p>
  </div>
</div>

Answer 2

有必要吗？为了解决您的问题，您可以使用flex规则。我将您的内容包装在父div main中，并为其设置了flex规则，这将使您的内容扩展到整个页面的高度，并且还指定了height 100vh。同样在footer类中，您具有justify-content: flex-end规则，因此margin-left 1280px毫无意义。

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.footer {
    /* margin-top: 25px; */
    /*margin-right: 1280px;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 160px;
    align-items: flex-end;

}

<div class="main">
  <div style="text-align:center">
    <h1>
      Welcome to {{ title }}!
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  </div>
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
  </ul>

  <div class="footer">
    <p>Build was published on 20200309.</p>
  </div>
</div>

Answer 3

您可以使用flexbox做到这一点。

这是您必须在应用程序中模仿的模板。

<div class="main-container">
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

您的CSS看起来像这样：

body, html {
  height: 100%;
  margin: 0;
}
.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  background-color: green;
  flex: 1;
}

.footer {
  flex: 0 0 auto;
  height: 100px;
  background-color: red;
}

提示是您的div 内容将占用剩余空间，而页脚位于页面底部。

如何使页脚始终位于页面底部以提供不同的屏幕分辨率

3 个答案: