html - 页脚无法正常工作

Question

我正在尝试使页脚保持在页面最底部的相同固定位置。我无法让它平放在最底部，它一直显示页面的大约 1/10。我也很难让它对浏览器大小的变化使用react。我已经包含了一个空白的 div，它应该展开以保持页脚与浏览器大小相匹配，但我目前无法让它正常工作。页面上的其他所有内容都会对调整大小做出正确 react 。我在这两个粘贴箱中包含了我的 CSS 和 HTML，我还在 Imgur 链接中包含了图像。 http://imgur.com/a/262iYHTML: http://pastebin.com/raw/BCpvspZQ CSS:http://pastebin.com/raw/2Se0A5ER

.kale-grain-bowls, .salads,
.burgers-sandwiches, .sides,
.smoothies-milkshake, .kids-real-meals{
	background-position: 0% 0%;
	height: 100px;
	float: left;
	margin:2.5px;
	position: relative;
}
.kale-grain-bowls{
	background-image: url('../images-source/templateFoodMainPage.png');
}
.salads{
	background-image: url('../images-source/templateFoodMainPage.png');
	bottom: 72px;
}
.burgers-sandwiches{
	background-image: url('../images-source/templateFoodMainPage.png');
	bottom: 144px;
}
.sides{
	background-image: url('../images-source/templateFoodMainPage.png');
	bottom: 216px;
}
.smoothies-milkshake{
	background-image: url('../images-source/templateFoodMainPage.png');
	bottom: 288px;
}
.kids-real-meals{
	background-image: url('../images-source/templateFoodMainPage.png');
	bottom: 360px;
}
.page{
	height: 100%;
	width: 100%;
	text-align: center;
}
.video, .front-promo-1,
.front-promo-2, .events,
.family-foundation, .partners,
.fundraisers, .cousins, .geniuses,
.greats, .vision{
	margin: 2.5px;
	float: left;
	position: relative;
}
.video{
	height: 300px;
	background-image: url('../images-source/videoImage.png');
	bottom: 360px;
}
.front-promo-1{
	height: 147.5px;
	background-image: url('../images-source/templateMainpage.png');
	bottom: 360px;
}
.front-promo-2{
	height: 147.5px;
	background-image: url('../images-source/templateMainpage.png');
	bottom: 360px;
}
.events{
	height: 300px;
	background-image: url('../images-source/communitySlideshow.png');
}
.family-foundation{
	height: 149px;
	background-image: url('../images-source/Familyfoundation.png');
	bottom: 75px;
}
.partners{
	height: 149px;
	background-image: url('../images-source/Familyfoundation.png');
	bottom: 75px;
}
.fundraisers{
	height: 149px;
	background-image: url('../images-source/Familyfoundation.png');
	bottom: 125px;
}
.cousins{
	height: 149px;
	background-image: url('../images-source/communitybottom.png');
	bottom: 72px;
}
.geniuses{
	height: 149px;
	background-image: url('../images-source/communitybottom.png');
	bottom: 72px;
}
.greats{
	height: 149px;
	background-image: url('../images-source/communitybottom.png');
	bottom: 72px;
}
.vision{
	height: 300px;
	background-image: url('../images-source/about.png');
}
.location-data{
	float:left;
	width:50%;
	height:100%;
}
.location-image{
	float: left;
	background-image: url('../images-source/communitybottom.png');
	height: 300px
}
.location-text{
	float: left;
	bottom: 1px;
}
.foodblock{
	float: left;
	margin: 10px;
	height: auto;
	bottom: 50px;
}
.textblock{
	float: left;
	margin: 20px;
	text-align: center;
}
.foodcontent{
	bottom: 500px;
}
.menu-type{
	text-align: center;
	font-weight: bold;
	font-family: "Times New Roman", Georgia, Serif;
	font-size: 2.5em;
}
.spicy-avocado-lime, .toasted-almond-ginger,
.power-bowl, .farmstand-tomato-basil,
.chicken-caesar, .harvest-kale,
.southwestern-chicken, .watermelon-feta,
.summer-berry-salad, .cousin-oliver,
.west-side, .el-guapo, .adopted-luke,
.buffalo, .elizel, .real-fries,
.sweet-potato-fries, .crisp-veggies,
.side-salad, .seasonal-special,
.kale-crush, .acai-berry,
.strawberry-banana, .lucy-blue,
.seasonal-special-smoothie,
.vanilla, .chocolate, 
.kids-burger, .grilled-cheese,
.hot-dog, .kids-smoothie, .local-apple-bacon-bowl{
	height: 200px;
	float: left;
	width: 100%;
}
.spicy-avocado-lime{
	background-image: url('../images-source/communitybottom.png');
}
.toasted-almond-ginger{
	background-image: url('../images-source/communitybottom.png');
}
.local-apple-bacon-bowl{
	background-image: url('../images-source/communitybottom.png');
}
.power-bowl{
	background-image: url('../images-source/communitybottom.png');
}
.farmstand-tomato-basil{
	background-image: url('../images-source/communitybottom.png');
}
.chicken-caesar{
	background-image: url('../images-source/communitybottom.png');
}
.harvest-kale{
	background-image: url('../images-source/communitybottom.png');
}
.southwestern-chicken{
	background-image: url('../images-source/communitybottom.png');
}
.watermelon-feta{
	background-image: url('../images-source/communitybottom.png');
}
.summer-berry-salad{
	background-image: url('../images-source/communitybottom.png');
}
.salad-subtext{
	width: 100%;
	text-align: center;
}
.cousin-oliver{
	background-image: url('../images-source/communitybottom.png');
}
.west-side{
	background-image: url('../images-source/communitybottom.png');
}
.el-guapo{
	background-image: url('../images-source/communitybottom.png');
}
.adopted-luke{
	background-image: url('../images-source/communitybottom.png');
}
.buffalo{
	background-image: url('../images-source/communitybottom.png');
}
.elizel{
	background-image: url('../images-source/communitybottom.png');
}
.burger-top-text{
	text-align: center;
	width: 100%;
}
.burger-bottom-text{
	text-align: center;
	width: 100%;
}
.real-fries{
	background-image: url('../images-source/communitybottom.png');
}
.sweet-potato-fries{
	background-image: url('../images-source/communitybottom.png');
}
.crisp-veggies{
	background-image: url('../images-source/communitybottom.png');
}
.side-salad{
	background-image: url('../images-source/communitybottom.png');
}
.seasonal-special{
	background-image: url('../images-source/communitybottom.png');
}
.kale-crush{
	background-image: url('../images-source/communitybottom.png');
}
.acai-berry{
	background-image: url('../images-source/communitybottom.png');
}
.strawberry-banana{
	background-image: url('../images-source/communitybottom.png');
}
.lucy-blue{
	background-image: url('../images-source/communitybottom.png');
}
.seasonal-special-smoothie{
	background-image: url('../images-source/communitybottom.png');
}
.vanilla{
	background-image: url('../images-source/communitybottom.png');
}
.chocolate{
	background-image: url('../images-source/communitybottom.png');
}
.smoothies-top-text{
	width: 100%;
}
.milkshakes-text{
	width: 100%;
	text-align: center;
}
.kids-burger{
	background-image: url('../images-source/communitybottom.png');
}
.grilled-cheese{
	background-image: url('../images-source/communitybottom.png');
}
.hot-dog{
	background-image: url('../images-source/communitybottom.png');
}
.kids-smoothie{
	background-image: url('../images-source/communitybottom.png');
}
.kids-real-meal-text{
	width: 100%;
}
.clear-div{
	clear: both;
}
.bgood-footer{
	width:100%;
	height: 20%;
	position: fixed;
    bottom: 0;
    margin: 0 auto;
}
.mobile-app, .talk,
.careers, .press,
.blank, .fb, .yt
.tw, .ig, .orderng-loc{
	float: left;
	background-repeat: no-repeat;
}
.mobile-app{
	background-image: url('../images-source/mobile-app-button.png');
	width: 10%;
}
.talk{
	background-image: url('../images-source/talk-to-us.png');
	width: 10%;
}
.careers{
	background-image: url('../images-source/careers.png');
	width: 10%;
}
.press{
	background-image: url('../images-source/press.png');
	width: 10%;
}
.blank{
	background-image: url('../images-source/blank.png');
	width: 10%;
}
.fb{
	background-image: url('../images-source/fb.png');
	width: 5%;
}
.yt{
	background-image: url('../images-source/yt.png');
	width: 5%;
}
.tw{
	background-image: url('../images-source/tw.png');
	width: 5%;
}
.ig{
	background-image: url('../images-source/ig.png');
	width: 5%;
}
.ordering-loc{
	background-image: url('../images-source/ordering-loc.png');
	width: 10%;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

img.footer-img{
  width:50px;
}
img.mobile-app-img{
	width: 150px;
	height: 100%;
}
img.talk-to-us-img{
	width: 150px;
	height: 100%;
}
img.careers-img{
	width: 100px;
	height: 100%;
}
img.press-img{
	width: 100px;
	height: 100%;
}
img.ordering-loc-img{
	width: 190px;
	height: 100%;
}
ul.clearfix{
  list-style:none;
  margin:2px;
  padding:2px 2px;
  width:100%;
  float:left;
}

li.foot{
  float:left;
  height: 45px;
}

li.left {
  float:left;
}

li.mid{
  float:left;
}

li.right{
  float:left;
}
/*for mobile phones: */
	[class*="col-"]{
		width:100%;
	}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8%;}
    .col-m-2 {width: 16%;}
    .col-m-2-5 {width: 21.55%;}
    .col-m-3 {width: 28%;}
    .col-m-4 {width: 32.5%;}
    .col-m-5 {width: 40%;}
    .col-m-6 {width: 48%;}
    .col-m-7 {width: 56%;}
    .col-m-8 {width: 65.7%;}
    .col-m-9 {width: 72%;}
    .col-m-10 {width: 80%;}
    .col-m-11 {width: 88%;}
    .col-m-12 {width: 96%;}
    /*footer data: */
    .foot-m-0{width:0%;}
}
@media only screen and (min-width: 768px){
	/*for mobile desktop: */
	.col-1 {width: 8%;}
	.col-2-5 {width: 21.55%;}
    .col-2 {width: 16%;}
    .col-3 {width: 28%;}
    .col-4 {width: 32.5%;}
    .col-5 {width: 40%;}
    .col-6 {width: 48%;}
    .col-7 {width: 56%;}
    .col-8 {width: 65.7%;}
    .col-9 {width: 72%;}
    .col-10 {width: 80%;}
    .col-11 {width: 88%;}
    .col-12 {width: 96%;}
    /*footer data: */
    .foot-m-0{width:0%;}
}

<div class="page">
<a href="/menu/kale-grain-bowls"><div class="col-m-2 col-2 kale-grain-bowls">Kale & Grain Bowls</div></a>
<a href="/menu/salads"><div class="col-m-2 col-2 salads">Salads</div></a>
<a href="/menu/burgers-sandwiches"><div class="col-m-2 col-2 burgers-sandwiches">Burgers & Sandwiches</div></a>
<a href="/menu/sides"><div class="col-m-2 col-2 sides">Sides</div></a>
<a href="/menu/smoothies-shakes"><div class="col-m-2 col-2 smoothies-milkshake">Smoothies & Milkshakes</div></a>
<a href="/menu/kids-real-meals"><div class="col-m-2 col-2 kids-real-meals">Kid's Real Meals</div></a>
<div class="col-m-8 col-8 video">Video</div>
<a href="/promo/temp1"><div class="col-m-4 col-4  front-promo-1">Promo one</div></a>
<a href="/promo/temp2"><div class="col-m-4 col-4 front-promo-2">Promo two</div></a>
<div class="bgood-footer clearfix">
<ul class= clearfix>
	<li class="left foot"><a href="/mobile-app"><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/mobile-app-button.png" class ="mobile-app-img"></a></li>
	<li class="left foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/talk-to-us.png" class ="talk-to-us-img"></a></li>
	<li class="left foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/careers.png" class ="careers-img"></a></li>
	<li class="left foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/press.png" class ="press-img"></a></li>
        <li class = "mid foot foot-m-0"></li>
	<li class="foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/fb.png" class ="footer-img"></a></li>
	<li class="foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/yt.png" class ="footer-img"></a></li>
	<li class="foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/tw.png" class ="footer-img"></a></li>
	<li class="foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/ig.png" class ="footer-img"></a></li>
	<li class="right foot"><a href=""><img src="/sites/acquia-drupal-7-50-52-6330.dd/files/ordering-loc.png" class ="ordering-loc-img"></a></li>
</ul>
</div>
</div>

Answer 1

如果我对问题的理解正确并且您有一个固定高度的页脚，那么您可以在您的主体上使用一个最小高度，以使用 calc() 将它推到页面底部。

例如，您有一个 HTML 布局:

<body>
  <main><!-- Some Content --></main>
  <footer><!-- Footer Content --></footer>
<body>

那么你的 css 应该是这样的:

.footer {
  height: 200px;
}

.main {
  min-height: calc(100vh - 200px);
}

据我所知，calc() 是现代移动和桌面浏览器广泛支持的函数。视口(viewport)高度单位 vh 也得到相当广泛的支持。

您必须重新计算各种媒体查询才能使其真正响应。

或者，如果您不知道页脚高度，您可以使用 jQuery(如果您熟悉它，也可以使用 vanilla js)即时计算它以添加最小高度:

jQuery(document).ready(function(){
  var height = window.innerHeight;
  var footerHeight = $('footer').outerHeight();
  $('main').css('min-height', (height - footerHeight) + 'px');
});

我相信一些 SO 专家会为您提供更多答案，但这是我的看法。