如何始终在页面底部获取页脚以获取不同的屏幕分辨率

Question

我正在用电子构建一个 Angular 应用程序。该应用程序以全屏模式打开。而且我要求页脚始终位于页面底部。尽管用户以不同的分辨率打开此应用。

页脚是“构建发布于 20200309。”

我附上了一张显示页脚不在页面底部的图片。

代码 sn-ps

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;

}

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

我的 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 规则，这将允许您的内容延伸到整个页面的高度，并且还指定了 100vh 的 height。同样在 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 content 将占用剩余空间，将页脚留在页面底部。