如何让我的页脚不出现在内容上？

问题描述 投票：0回答：2

我试图为我爸爸的生意做一个画廊网站，我遇到了一个问题。我的图片被我的页脚切断了。这是一个我的代码的例子。

<head>
  <!--Start of FONTS-->
  <link href="https://fonts.googleapis.com/css2?family=DM+Mono&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Mukta&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
  <!--End of FONTS-->
</head>
<header>

</header
<body>
  <div id="page-container">
    <div id="content-wrap">
      <!--Page Content-->
        <center>
  <h1>The Balloonatic's Balloons!</h1>
  </center>
    <!--Start of Gallery-->
 <img src="https://static.wixstatic.com/media/92ee09_33917459124548d397fef56096891dbc.jpg/v1/fill/w_519,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_33917459124548d397fef56096891dbc.webp" alt="Joe's Son in an elephant mask made out of latex balloons." height="420" width="420" class="row">
  <img src="https://static.wixstatic.com/media/92ee09_25e030786c9947e78d44a687bfc0b2e7.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_25e030786c9947e78d44a687bfc0b2e7.webp" alt="Photo of a balloon dress that is mostly green but has a black patter on it. This balloon dress also has a green lace that would go around the neck." height="420" width="420" class="row">
  <img src="https://static.wixstatic.com/media/92ee09_5b51aaac5eb043659f8791e466823787.jpg/v1/fill/w_393,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_5b51aaac5eb043659f8791e466823787.webp" alt="Photo of a demonic mask made out of balloons.Yellow eyes and red face." height="420" width="420" class="row">
  <img src="https://static.wixstatic.com/media/92ee09_b8ad33393aaf4191a1be710697e929bc.jpg/v1/fill/w_491,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_b8ad33393aaf4191a1be710697e929bc.webp" alt="3 Photos of Hayden Lansinger at age 6 or 7 holding a balloon crossbow." height="420" width="420" class="row">
    <img src="https://static.wixstatic.com/media/92ee09_79587a1f798a488dbbc6b23bde2ec615.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_79587a1f798a488dbbc6b23bde2ec615.webp" alt="A balloon dragon. Black with green eyes." height="420" width="420" style="text-align: center">
    <img src="https://static.wixstatic.com/media/92ee09_d71175118d024b78a531058ad0ecd60f.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_d71175118d024b78a531058ad0ecd60f.webp" alt="A balloon race car, green and black." height="420" width="420" class="row">
     <img src="https://static.wixstatic.com/media/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.jpg/v1/fill/w_657,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.webp" alt="An abominable snowman made out of balloons." height="420" width="420" class="row">
    <img src="https://static.wixstatic.com/media/92ee09_ea62749742d3443a8be115586e0d0c9e.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_ea62749742d3443a8be115586e0d0c9e.webp" alt="A photo of Chloe Lansinger in a balloon dress." height="420" width="420" class="row">
    <img src="https://static.wixstatic.com/media/92ee09_965444c3c8ab4b25a0743db871c867f0.jpg/v1/fill/w_489,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_965444c3c8ab4b25a0743db871c867f0.webp" alt="A picture of Balloosions Dressez." height="420" width="420" class="row">
    <!--End of Gallery-->

    </div>
    <div id="footer">
      <a href="https://twitter.com/balloosions" target="_blank">
        <img src="https://static.wixstatic.com/media/01113281ebb7dfb57a8dc2a02eb1cb92.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/01113281ebb7dfb57a8dc2a02eb1cb92.webp" alt="Twitter Button" style="opacity: 1.0" id="foot-twitter">
      </a>
      <a href="https://facebook.com/balloosions" target="_blank">
        <img src="https://static.wixstatic.com/media/b1cd13f9d4dfb1450bbb325285106177.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/b1cd13f9d4dfb1450bbb325285106177.webp" alt="Facebook Button" style="opacity: 1.0" id="foot-facebook">
      </a>
<footer id="copyright">© 2020 Balloosions</footer>
<footer id="dev-note">Developed and Designed by Hayden Lansinger</footer>
    </div>
  </div>
</body>

现在是CSS

h1 {
  font-family: "Balsamiq Sans";
  font-weight: 100;
}
/*Start of IMG*/
img:hover {
  opacity: 1.0;
}

img {
  opacity: 0.17;
}

.row {
  position: relative;
  left: 3%;
}

/*End of IMG*/
/*Start of FOOTER CSS*/

#dev-note {
  padding-bottom: 3em;
}

#foot-twitter {
  position: relative;
  right: 0.5%;
}

#foot-facebook {
  position: relative;
  left: 0.5%;
}

/*End of FOOTER CSS*/

/*Start of MAIN CSS*/
#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem; /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5rem; /* Footer height */
  background-color: #00bfff;
  margin: 0;
  text-align: center;
  padding-top: 2em;
  padding-bottom: 2em;
  font-size: 12px;
  font-family: Mukta;
}

body {
  background-color: white;
  color: black;
  font-family: ;
}

/*End of MAIN CSS*/

请帮我解决这个问题。

如果方便的话，你也可以通过我的Codepen查看。

编码笔

但是如果你们知道有什么可以帮助我的，请帮我。我正在寻找任何答案。我对编码也算是新手，所以不知道该怎么做。只是想在这里得到足够的文字，这样我就可以提交它。

html css footer cut
2个回答
1
投票

将页脚的位置属性改为相对的。. 这样就可以将页脚设置在页面的底部，而不是在其父页的底部。

0
投票

移除 postion:absolute 和 bottom:0 从页脚开始。

此外： <center></center> 不再允许和 <header></header> 应放在 <body>

h1 {
  font-family: "Balsamiq Sans";
  font-weight: 100;
}


/*Start of IMG*/

img:hover {
  opacity: 1.0;
}

img {
  opacity: 0.17;
}

.row {
  position: relative;
  left: 3%;
}


/*End of IMG*/


/*Start of FOOTER CSS*/

#dev-note {
  padding-bottom: 3em;
}

#foot-twitter {
  position: relative;
  right: 0.5%;
}

#foot-facebook {
  position: relative;
  left: 0.5%;
}


/*End of FOOTER CSS*/


/*Start of MAIN CSS*/

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;
  /* Footer height */
}

#footer {
  width: 100%;
  height: 5rem;
  /* Footer height */
  background-color: #00bfff;
  margin: 0;
  text-align: center;
  padding-top: 2em;
  padding-bottom: 2em;
  font-size: 12px;
  font-family: Mukta;
}

body {
  background-color: white;
  color: black;
  font-family: ;
}
<div id="page-container">
  <div id="content-wrap">
    <!--Page Content-->
    <center>
      <h1>The Balloonatic's Balloons!</h1>
    </center>
    <!--Start of Gallery-->
    <img src="https://static.wixstatic.com/media/92ee09_33917459124548d397fef56096891dbc.jpg/v1/fill/w_519,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_33917459124548d397fef56096891dbc.webp" alt="Joe's Son in an elephant mask made out of latex balloons." height="420"
      width="420" class="row">
    <img src="https://static.wixstatic.com/media/92ee09_25e030786c9947e78d44a687bfc0b2e7.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_25e030786c9947e78d44a687bfc0b2e7.webp" alt="Photo of a balloon dress that is mostly green but has a black patter on it. This balloon dress also has a green lace that would go around the neck."
      height="420" width="420" class="row">
    <img src="https://static.wixstatic.com/media/92ee09_5b51aaac5eb043659f8791e466823787.jpg/v1/fill/w_393,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_5b51aaac5eb043659f8791e466823787.webp" alt="Photo of a demonic mask made out of balloons.Yellow eyes and red face."
      height="420" width="420" class="row">
    <img src="https://static.wixstatic.com/media/92ee09_b8ad33393aaf4191a1be710697e929bc.jpg/v1/fill/w_491,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_b8ad33393aaf4191a1be710697e929bc.webp" alt="3 Photos of Hayden Lansinger at age 6 or 7 holding a balloon crossbow."
      height="420" width="420" class="row">
    <img src="https://static.wixstatic.com/media/92ee09_79587a1f798a488dbbc6b23bde2ec615.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_79587a1f798a488dbbc6b23bde2ec615.webp" alt="A balloon dragon. Black with green eyes." height="420" width="420"
      style="text-align: center">
    <img src="https://static.wixstatic.com/media/92ee09_d71175118d024b78a531058ad0ecd60f.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_d71175118d024b78a531058ad0ecd60f.webp" alt="A balloon race car, green and black." height="420" width="420"
      class="row">
    <img src="https://static.wixstatic.com/media/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.jpg/v1/fill/w_657,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.webp" alt="An abominable snowman made out of balloons." height="420" width="420"
      class="row">
    <img src="https://static.wixstatic.com/media/92ee09_ea62749742d3443a8be115586e0d0c9e.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_ea62749742d3443a8be115586e0d0c9e.webp" alt="A photo of Chloe Lansinger in a balloon dress." height="420" width="420"
      class="row">
    <img src="https://static.wixstatic.com/media/92ee09_965444c3c8ab4b25a0743db871c867f0.jpg/v1/fill/w_489,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_965444c3c8ab4b25a0743db871c867f0.webp" alt="A picture of Balloosions Dressez." height="420" width="420" class="row">
    <!--End of Gallery-->

  </div>
  <div id="footer">
    <a href="https://twitter.com/balloosions" target="_blank">
      <img src="https://static.wixstatic.com/media/01113281ebb7dfb57a8dc2a02eb1cb92.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/01113281ebb7dfb57a8dc2a02eb1cb92.webp" alt="Twitter Button" style="opacity: 1.0" id="foot-twitter">
    </a>
    <a href="https://facebook.com/balloosions" target="_blank">
      <img src="https://static.wixstatic.com/media/b1cd13f9d4dfb1450bbb325285106177.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/b1cd13f9d4dfb1450bbb325285106177.webp" alt="Facebook Button" style="opacity: 1.0" id="foot-facebook">
    </a>
    <footer id="copyright">© 2020 Balloosions</footer>
    <footer id="dev-note">Developed and Designed by Hayden Lansinger</footer>
  </div>
</div>
0
投票

我看了你的代码，能够在页脚和内容包装之间增加一个空隙，只需增加你的 padding-bottom 的属性 content-wrap div如是

#content-wrap {
  padding-bottom: 10.5rem; /* Footer height */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.