html - 異なる画面解像度で常にページの下部にフッターを表示する方法

私は Electron で 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 は画面サイズを変更した後のもので、フッターの位置が変更されていることがわかります。

3

これであなたの質問は解決しましたか?フッターを Web ページの下部に配置するにはどうすればよいですか?

– マーク・ヨース

2020 年 9 月 3 日 8:23

ありがとうマーク、リンクは役に立ちました、皆さんありがとう :)

– カランシス

2020 年 9 月 3 日 9:46

------------------------

位置を試してみてください:相対と下部: この目的では 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>

------------------------

それは必要でしたか？問題を解決するには、フレックス ルールを使用できます。私はwコンテンツを親 div メインにラップし、それにフレックス ルールを設定します。これにより、コンテンツがページ全体の高さにわたって伸びることが可能になり、高さ 100vh も指定されます。また、フッター クラスには 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>

------------------------

フレックスボックスを使用してこれを行うことができます。

アプリで模倣する必要があるテンプレートは次のとおりです。

<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 コンテンツが残りのスペースを占有し、フッターはページの下部。