Html 页脚工作不正常_Html_Css_Drupal_Drupal 7

Html 页脚工作不正常

html css drupal drupal-7

Html 页脚工作不正常,html,css,drupal,drupal-7,Html,Css,Drupal,Drupal 7,我试图使页脚保持在页面底部的固定位置。我不能让它平躺在最底部，它一直显示大约十分之一的页面向上。我也很难让它对浏览器大小的变化做出反应。我已经包括了一个空白div，它应该扩展以保持页脚与浏览器大小匹配，但我目前无法使其正常工作。页面上的所有其他内容都可以正确地调整大小。我已经在这两个粘贴箱中包含了我的CSS和HTML，我也在Imgur链接中包含了图像。 HTML:CSS: .kale谷物碗、.salars、， .汉堡包三明治，.面， .冰沙奶昔.儿童正餐{ 背景位置：0%0%；高度：100p

我试图使页脚保持在页面底部的固定位置。我不能让它平躺在最底部，它一直显示大约十分之一的页面向上。我也很难让它对浏览器大小的变化做出反应。我已经包括了一个空白div，它应该扩展以保持页脚与浏览器大小匹配，但我目前无法使其正常工作。页面上的所有其他内容都可以正确地调整大小。我已经在这两个粘贴箱中包含了我的CSS和HTML，我也在Imgur链接中包含了图像。 HTML:CSS:

.kale谷物碗、.salars、，
.汉堡包三明治，.面，
.冰沙奶昔.儿童正餐{
背景位置：0%0%；
高度：100px；
浮动：左；
利润率：2.5px；
位置：相对位置；
}
.羽衣甘蓝谷物碗{
背景图像：url（'../images source/templateFoodMainPage.png'）；
}
.沙拉{
背景图像：url（'../images source/templateFoodMainPage.png'）；
底部：72px；
}
.汉堡三明治{
背景图像：url（'../images source/templateFoodMainPage.png'）；
底部：144px；
}
.双方{
背景图像：url（'../images source/templateFoodMainPage.png'）；
底部：216px；
}
.冰沙奶昔{
背景图像：url（'../images source/templateFoodMainPage.png'）；
底部：288px；
}
.孩子们的正餐{
背景图像：url（'../images source/templateFoodMainPage.png'）；
底部：360px；
}
.第页{
身高：100%；
宽度：100%；
文本对齐：居中；
}
.video、.front-promo-1、，
.front-promo-2、.活动、，
.家庭基金会、.合伙人、，
.募捐者，.堂兄弟，.天才，
.伟大的，.远见{
利润率：2.5px；
浮动：左；
位置：相对位置；
}
.视频{
高度：300px；
背景图像：url（'../images source/videoImage.png'）；
底部：360px；
}
.front-promo-1{
身高：147.5px；
背景图像：url（'../images source/templateMainpage.png'）；
底部：360px；
}
.front-promo-2{
身高：147.5px；
背景图像：url（'../images source/templateMainpage.png'）；
底部：360px；
}
.事件{
高度：300px；
背景图像：url（'../images-source/communitySlideshow.png'）；
}
.家庭基金会{
高度：149px；
背景图像：url（'../images source/Familyfoundation.png'）；
底部：75px；
}
.合伙人{
高度：149px；
背景图像：url（'../images source/Familyfoundation.png'）；
底部：75px；
}
.筹款人{
高度：149px；
背景图像：url（'../images source/Familyfoundation.png'）；
底部：125px；
}
.表兄弟姐妹{
高度：149px；
背景图像：url（'../images-source/communitybooth.png'）；
底部：72px；
}
.天才{
高度：149px；
背景图像：url（'../images-source/communitybooth.png'）；
底部：72px；
}
伟大的{
高度：149px；
背景图像：url（'../images-source/communitybooth.png'）；
底部：72px；
}
.愿景{
高度：300px；
背景图像：url（'../images-source/about.png'）；
}
.位置数据{
浮动：左；
宽度：50%；
身高：100%；
}
.位置图像{
浮动：左；
背景图像：url（'../images-source/communitybooth.png'）；
高度：300px
}
.位置文本{
浮动：左；
底部：1px；
}
.食物块{
浮动：左；
利润率：10px；
高度：自动；
底部：50px；
}
.textblock{
浮动：左；
利润率：20px；
文本对齐：居中；
}
.食物内容{
底部：500px；
}
.菜单类型{
文本对齐：居中；
字体大小：粗体；
字体系列：“时代新罗马”，佐治亚州，衬线；
字号：2.5em；
}
.辛辣鳄梨青柠、烤杏仁姜、，
.电动碗，.农场番茄罗勒，
.凯撒鸡，.收获甘蓝，
.西南鸡、.西瓜羊奶、，
.夏莓沙拉，.奥利弗表兄，
.西区，.埃尔瓜博，.收养了卢克，
布法罗，伊莱泽尔，真正的薯条，
.红薯薯条、脆蔬菜、，
.配菜沙拉、季节特色菜、，
.羽衣甘蓝压榨，
草莓香蕉，露西蓝，
.季节性特色冰沙，
香草，巧克力，
.儿童汉堡，.烤奶酪，
.热狗、.儿童奶昔、.本地苹果培根碗{
高度：200px；
浮动：左；
宽度：100%；
}
.辛辣鳄梨酸橙{
背景图像：url（'../images-source/communitybooth.png'）；
}
.烤杏仁姜{
背景图像：url（'../images-source/communitybooth.png'）；
}
.本地苹果培根碗{
背景图像：url（'../images-source/communitybooth.png'）；
}
.电动碗{
背景图像：url（'../images-source/communitybooth.png'）；
}
.农场番茄罗勒{
背景图像：url（'../images-source/communitybooth.png'）；
}
凯撒鸡{
背景图像：url（'../images-source/communitybooth.png'）；
}
.收获甘蓝{
背景图像：url（'../images-source/communitybooth.png'）；
}
.西南鸡{
背景图像：url（'../images-source/communitybooth.png'）；
}
.西瓜胎{
背景图像：url（'../images-source/communitybooth.png'）；
}
.夏日浆果沙拉{
背景图像：url（'../images-source/communitybooth.png'）；
}
.沙拉潜台词{
宽度：100%；
文本对齐：居中；
}
奥利弗表兄{
背景图像：url（'../images-source/communitybooth.png'）；
}
西区{
背景图像：url（'../images-source/communitybooth.png'）；
}
el guapo先生{
背景图像：url（'../images-source/communitybooth.png'）；
}
.领养卢克{
背景图像：url（'../images-source/communitybooth.png'）；
}
布法罗先生{
背景图像：url（'../images-source/communitybooth.png'）；
}
埃利泽尔先生{
背景图像：url（'../images-source/communitybooth.png'）；
}
.burger顶部文本{
文本对齐：居中；
宽度：100%；
}
.burger底部文本{
文本对齐：居中；
宽度：100%；
}
.真正的薯条{
背景图像：url（'../images-source/communitybooth.png'）；
}
.红薯薯条{
背景图像：url（'../images-source/communitybooth.png'）；
}
.脆蔬菜{
背景图像：url（'../images-source/communitybooth.png'）；
}
.配菜沙拉{
背景图像：url（'../images-source/communitybooth.png'）；
}
.季节性特价{
背景图像：url（'../images-source/communitybooth.png'）；
}
甘蓝压榨{
背景图像：url（'../images-source/communitybooth.png'）；
}
阿凯莓{
背景图像：url（'../images-source/communitybooth.png'）；
}
<body>
  <main><!-- Some Content --></main>
  <footer><!-- Footer Content --></footer>
<body>

.footer {
  height: 200px;
}

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

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