質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

footerを下部で固定したい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 182

score 6

前提・実現したいこと

<main>と<footer>の間の余白を狭め、
footerを下部で固定したい。
画面はスクロールを生まずにページ内に納めたい。

発生している問題・エラーメッセージ

footer下に余白が出る。

該当のソースコード

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Furniture Design-About</title>
    <meta name="description" content="家具">

    <!---レスポン--->
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel ="preconnect" href = "https://fonts.gstatic.com" crossorigin>
    <link href ="https://fonts.googleapis.com/css2?family = M + PLUS + Rounded + 1c:wght @ 700& display = swap "rel =" stylesheet ">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css" >
    <link rel="stylesheet" href="css/responsive.css" >
    <link rel="icon" type="image/png" href="img/favicon.ico">

</head>

  <body>

    <header id="header" class="wrapper">
      <h1 class="logo">
        <a href="index.html">
          <img src="img/logo.svg" alt="logo"></a></h1>
    </header>

    <main>
      <div class="productspage wrapper">
        <h2 class="pagetitle">About</h2>
        <div class="item">


        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキス
          <br>
          <br>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキス
        </p>

        </div>
      </div>
    </main>
    <footer id="footer" class="wrapper">
      <ul>
        <li><a href="https://www.instagram.com/"target="_blank">INSTAGRAM</a></li>
        <li><a href="https://twitter.com/"target="_blank">TWITTER</a></li>
        <li><a href="https://www.facebook.com/" target="_blank">FACEBOOK</a></li>
      </ul>
      <p class="copy"><small>&copy;Furniture Design</small></p>
    </footer>
  </body>
</html>
@charset "UTF-8";
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

body {
  margin: 0;
}
main {
  display: block;
}

blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
abbr[title] {
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}
img,
embed,
object,
iframe {
  vertical-align: bottom;
}
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
}

button,
input {
  /* 1 */
  overflow: visible;
}

button,
select {
  /* 1 */
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

select::-ms-expand {
  display: none;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px; /* 1 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

label[for] {
  cursor: pointer;
}
details {
  display: block;
}
summary {
  display: list-item;
}

[contenteditable] {
  outline: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}
template {
  display: none;
}
[hidden] {
  display: none;
}


html {
  font-size: 100%;
}

body {
  color: #333;
  font-size: 0.875rem;
  min-height: 100vh;
  position: relative;
  margin-top:100px;

}


a {
  text-decoration: none;
}


img {
  max-width: 100%;
}


li {
  list-style: none;
}


#header {
  width: 100%;
  height: 80px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  background-color: #fff;


}
#header .logo a {
  width: 180px;
  display: block;
}

.logo {

  padding-top :30px;

}

.grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  justify-content: space-between;
  gap:30px;
  row-gap: 50px;
}

.grid p {
  font-size: 0.75rem;
  margin-top: 10px;
}

.wrapper {
padding: 0 40px;
min-width: 100vh;
max-width: 1360px;
margin: 0 auto;



}

.view {
  text-align: center ;
  padding-top: 40px;
  margin-bottom: 130px;
}

#footer {
  display: flex;
  justify-content: space-between;
  bottom: 0;
  position: absolute;
}

#footer ul {
  display: flex;
  margin-bottom: 20px;
}

#footer li {
  margin-right: 30px;
  font-size: 12px;
}

.copy {
  font-size: 10px;
}

/**about**/

.item {
  max-width: 600px;

}

.item p {
line-height: 1.9rem;
}

.productspage {
  padding-top: 20px;
  padding-bottom: 100px;

}

.pagetitle {
  font-size: 0.875rem;
  margin-bottom: 30px;
}

試したこと

「htmlとbodyのheightを100%と指定することで
コンテンツの内容に合わせて画面の高さが伸びる」とあったので、入れてみましたが変化ありませんでした。
↓また、下記コードを入れましたら、固定はされましたが、<main>と<footer>の間に余白ができました。

#footer {
  display: flex;
  justify-content: space-between;
  bottom: 0;
  position: absolute;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • itagagaki

    2021/07/31 14:16

    bodyが大きい場合、mainの直下にfooterを配置したら、footerの下に余白ができるのは当然なのでは?
    #footer ul に margin-bottom: 20px; がありますが、footer下の余白はこれではないですか?

    キャンセル

  • mo-n

    2021/07/31 15:33

    コメントありがとうございました。
    bodyへコード追加しましたらできました。

    キャンセル

回答 1

checkベストアンサー

0

こういうことですか?

body {
    color: #333;
    font-size: 0.875rem;
    min-height: calc(100vh - 100px); /* 変更 */
    position: relative;
    margin-top: 100px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/07/31 15:32

    ご回答ありがとうございました。ご提示のコード入れましたら、できました。
    ありがとうございます。

    キャンセル

  • 2021/07/31 15:40

    お役に立てたようで何よりです。

    ご理解いただいていると思いますが、margin-top: 100px の値が変わった時は、min-height の式を変える必要があります。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る