footerを下部で固定したい

前提・実現したいこと

<main>と<footer>の間の余白を狭め、 footerを下部で固定したい。画面はスクロールを生まずにページ内に納めたい。 ### 発生している問題・エラーメッセージ footer下に余白が出る。 ### 該当のソースコード ```HTML <!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>


``` CSS
@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>の間に余白ができました。

CSS
1#footer {
2  display: flex;
3  justify-content: space-between;
4  bottom: 0;
5  position: absolute;
6}

itagagaki

2021/07/31 05:16

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

mo-n

2021/07/31 06:33

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

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことですか？

css
1body {
2	color: #333;
3	font-size: 0.875rem;
4	min-height: calc(100vh - 100px); /* 変更 */
5	position: relative;
6	margin-top: 100px;
7}

投稿2021/07/31 06:28

Lhankor_Mhy

総合スコア36138

mo-n

2021/07/31 06:32

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

Lhankor_Mhy

2021/07/31 06:40

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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