堆栈内存溢出
  繁体   English   中英

如何让页脚远离我的内容？

[英]How do I keep my footer off of my content?

 原文  2020-05-22 16:28:39  0   3    html/ css/ footer/ cut

问题描述

我试图为我父亲的生意制作一个画廊网站，但遇到了一个问题。 我的图像被页脚截断。 这是我的代码示例。

<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 查看。

密码笔

但是，如果你们知道什么可以帮助我，请做。 我正在寻找任何答案。 我对编码也很陌生，所以我不知道该怎么做。 只是想在这里获得足够的单词，以便我可以提交它。

3 个解决方案

解决方案1
 1  2020-05-22 16:50:14

将页脚的 position 属性更改为 relative 。 这会将页脚设置在页面底部，而不是在其父级底部。

解决方案2
 0  2020-05-22 16:36:07

从页脚中删除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>

解决方案3
 0  2020-05-22 16:36:22

我浏览了您的代码，并且能够通过像这样增加content-wrap div 的padding-bottom属性来在页脚和您的内容包装器之间添加一个间隙：

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何锚定页脚，但保持内容高度为100％ 如何避免页脚div与页面内容重叠？ 如何使页脚位于内容的底部？ 如何使页脚位于页面底部？ 如何防止页脚文本出现在页脚外部 如何使导航栏保持在标题图像之外？ 如何防止我的内容区域移动 当我的 html 页面中的内容较少时，如何将页脚粘贴到底部 如何将页脚位置保持在多页内容下方 当所述内容改变高度时，如何将我的页脚保持在我的内容之下？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM