保持响应式网站底部的页脚 [英] Keeping footer at bottom of responsive website

问题描述

我希望将页脚始终显示在页面底部，而在页面内容很少时不会向上移动。我试过

  body，html {
 height：100％} 
 
 html body。宽＃wrapper.container {
最小高度：100％; 
职位：亲属; 
 padding-bottom：226px！important; / *页脚高度* / 
} 
 
 #containerfooter {
 position：absolute; 
 bottom：0; 
剩下：0; 
宽度：100％; 
} 
  

但是由于我的网站是响应式的，页脚高度会变化，内容在一些页面上。有什么办法可以使这项工作成功吗？

解决方案

如果页脚高度根据屏幕宽度而变化，视口或屏幕的底部将不是解决方案。

当屏幕尺寸减小时，页脚内容会相互缠绕或折叠，因此，请在设置页面内容的任何元素时设置最小高度。

代码笔示例

p>

on（click，function（）{$（< p> Pellentesque居住地morbi tristique senectus et netus et malesuada fames ac turpis egestas。Vestibulum tortor quam，feugiat vitae，ultricies eget，tempor sit amet，ante。Donec eu libero sit amet quam egestas semper。Aenean ultricies mi vitae est。Mauris placerat eleifend leo。< （）/ p>）。appendTo（.page-wrap.content）;}）; $（＃addFooterContent）。on（click，function（）{$（< p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas。Vestibulum tortor quam，feugiat vitae，ultricies eget，tempor sit amet，ante。Donec eu libero sit amet quam egestas semper。Aenean ultricies mi vitae est。Mauris placerat el

）。appendTo（。site-footer .content）;}）;

  * {margin：0;} html，body {height：92％; font-family：Helvetica，Arial，FreeSans，Verdana，Tahoma，Lucida Sans，Lucida Sans Unicode，Luxi Sans，sans-serif;} page-wrap {最小高度：100％;盒子尺寸：边框; padding：10px;}。page-wrap：after {content：; display：block;}。site-footer {background：black;位置：相对;左：0;正确：0;底部：0; min-height：100px; text-align：center;填充：10px;白颜色; box-sizing：border-box;} button.dark：hover {background-color：rgba（0，0，0，0.7）;} button.dark {background-color：black;边框：3px纯黑色; padding：10px 30px;白颜色;光标：指针; transition：.7s;} button.light：hover {background-color：#CCCCCC;} button.light {background-color：white;边框：3px纯白色; padding：10px 30px;颜色：黑色;光标：指针; transition：.7s;}。content p {margin-bottom：10px;}。content {border-top：1px solid black; < script src =>                  https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div class =page-wrap> < H1>页眉和LT; / H1> <峰; br> < button id =addBodyContentclass =dark>添加内容< / button> <峰; br> <峰; br> < div class =content>< / div>< / div>< footer class =site-footer> < H2>页脚< / H2> <峰; br> < button id =addFooterContentclass =light>添加内容< / button> <峰; br> <峰; br> < div class =content>< / div>< / footer>  

i would like to make my footer always show at the bottom of the pages and not move up when there is little page content. I tried

body, html {
height: 100%}

html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 226px!important;/*Footer height*/
}

#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

but since my site is responsive, the footer height varies and this code will hide content on some pages. Is there any way to make this work?

解决方案

If the footer height varies based on the width of the screen, fixing it to the bottom of the viewport or screen won't be the solution.

I get the impression that content in the footer will wrap or collapse below each other as the screen size decreases, so rather set a minimum height on whichever element wraps the page content.

A Code Pen Example

$("#addBodyContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".page-wrap .content");
});

$("#addFooterContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".site-footer .content");
});

* {
  margin: 0;
}
html,
body {
  height: 92%;
  font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.page-wrap {
  min-height: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer {
  background: black;
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100px;
  text-align: center;
  padding: 10px;
  color: white;
  box-sizing: border-box;
}
button.dark:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
button.dark {
  background-color: black;
  border: 3px solid black;
  padding: 10px 30px;
  color: white;
  cursor: pointer;
  transition: .7s;
}
button.light:hover {
  background-color: #CCCCCC;
}
button.light {
  background-color: white;
  border: 3px solid white;
  padding: 10px 30px;
  color: black;
  cursor: pointer;
  transition: .7s;
}
.content p {
  margin-bottom: 10px;
}
.content {
  border-top: 1px solid black;
  padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">

  <h1>Header</h1>
  <br>

  <button id="addBodyContent" class="dark">Add Content</button>
  <br>
  <br>
  <div class="content"></div>
</div>

<footer class="site-footer">
  <h2>Footer</h2>
  <br>
  <button id="addFooterContent" class="light">Add Content</button>
  <br>
  <br>
  <div class="content"></div>
</footer>

这篇关于保持响应式网站底部的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！