Fatal编程技术网
  • html/
  • Html 确保页脚贴在页面底部，并随内容调整

Html 确保页脚贴在页面底部，并随内容调整

html css

Html 确保页脚贴在页面底部，并随内容调整,html,css,responsive,Html,Css,Responsive,我现在有一个页脚，它会粘在页面底部，但当它运行到内容时，它会坐在上面。很明显，我希望它被它旁边的任何容器内容推下 以下是一个屏幕截图： 我想把那张桌子的底部推下去。这是我的CSS和HTML 主体和容器CSS 页脚CSS 应用程序HTML 我真的被这个问题难住了，似乎找不到答案！所有的帮助都会很好，谢谢 我在第6行的代码中添加了css 因为你的页脚高度是固定的，所以我利用了这个事实 如果你不明白，请阅读并评论 正文{ 颜色：黑色； 保证金：0； 填充：0； 背景颜色：绿色； /*魔法就在这里

我现在有一个页脚，它会粘在页面底部，但当它运行到内容时，它会坐在上面。很明显，我希望它被它旁边的任何容器内容推下

以下是一个屏幕截图：

我想把那张桌子的底部推下去。这是我的CSS和HTML

主体和容器CSS 页脚CSS 应用程序HTML
我真的被这个问题难住了，似乎找不到答案！所有的帮助都会很好，谢谢

我在第6行的代码中添加了css

因为你的页脚高度是固定的，所以我利用了这个事实

如果你不明白，请阅读并评论 
正文{
颜色：黑色；
保证金：0；
填充：0；
背景颜色：绿色；
/*魔法就在这里*/
框大小：边框框；
最小高度：100vh；
位置：相对位置；
填充底部：40px；
/*魔术到此结束*/
}
.集装箱{
最大宽度：1200px；
保证金：18px自动0；
文本对齐：居中；
边缘底部：40px；
}
.页脚{
高度：40px；
宽度：100%；
位置：绝对位置；
底部：0；
文本对齐：居中；
背景色：红色；
}

JS-Bin
洛雷姆*10
Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，无需支付任何费用。
我在这里
我在第6行的代码中添加了css

因为你的页脚高度是固定的，所以我利用了这个事实

如果你不明白，请阅读并评论 
正文{
颜色：黑色；
保证金：0；
填充：0；
背景颜色：绿色；
/*魔法就在这里*/
框大小：边框框；
最小高度：100vh；
位置：相对位置；
填充底部：40px；
/*魔术到此结束*/
}
.集装箱{
最大宽度：1200px；
保证金：18px自动0；
文本对齐：居中；
边缘底部：40px；
}
.页脚{
高度：40px；
宽度：100%；
位置：绝对位置；
底部：0；
文本对齐：居中；
背景色：红色；
}

JS-Bin
洛雷姆*10
Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，无需支付任何费用。
我在这里
尝试为页脚添加不同的div。。。 像这样的

<html>
  <body>
    <form id="form1" runat="server">
      <div>
        ..some code..
      </div>
      <div id="footer">
        <p align="center">Copyright &copy;</p>
      </div>
    </form>
  </body>
</html>


…一些代码。。

版权和副本
尝试为页脚添加不同的div。。。 像这样的

<html>
  <body>
    <form id="form1" runat="server">
      <div>
        ..some code..
      </div>
      <div id="footer">
        <p align="center">Copyright &copy;</p>
      </div>
    </form>
  </body>
</html>


…一些代码。。

版权和副本
您需要的是粘性页脚，而不是固定页脚。固定，内容将不会推送它。粘性，它将保持在底部，直到被内容推动。请注意，在页脚中插入填充物会影响页脚的大小，您必须调整其他措施才能使其正常工作。 请注意，我在.container中添加了20px的填充，因此我必须在底部边距和.push div上增加40px

我还建议您使用Footer元素而不是div.Footer

这是密码

CSS

HTML


Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，无需支付任何费用。Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，无需支付任何费用。Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，无需支付任何费用。Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，不存在任何新的权利。知识产权是一种权利，是一种精英的权利。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，不存在任何新的权利。知识产权是一种权利，是一种精英的权利。累积性葡萄胎，是一种暂时性的铜酸盐溶液。圣菲舍尔流动资金办公室，无任何法律依据
页脚

您需要的是粘性页脚，而不是固定的页脚。固定，内容将不会推送它。粘性，它将保持在底部，直到被内容推动。请注意，在页脚中插入填充物会影响页脚的大小，您必须调整其他措施才能使其正常工作。 请注意，我在.container中添加了20px的填充，因此我必须在底部边距和.push div上增加40px

我还建议您使用Footer元素而不是div.Footer

这是密码

CSS

HTML


Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，无需支付任何费用。Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。在流动资金管理局，除此之外，无需支付任何费用。Lorem ipsum dolor sit amet，奉献精英。累积性葡萄胎，是一种暂时性的铜酸盐溶液。北卡罗莱纳州圣法赛尔流动资金办公室（Sint facere aliquid officia atque molestiae）

<body>
  <%= render 'shared/top_bar' %>
  <div class="container">
    <%= render 'shared/errors' %>
    <%= yield %>
  </div>
  <%= render 'shared/footer' %>
</body>



<html>
  <body>
    <form id="form1" runat="server">
      <div>
        ..some code..
      </div>
      <div id="footer">
        <p align="center">Copyright &copy;</p>
      </div>
    </form>
  </body>
</html>



html, body {
  height: 100%;
  margin:0;
  padding:0;
}
.container {
  max-width: 1200px;
  text-align: center;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -80px;
  overflow: auto;
  padding:20px;
}
.push {
  height: 80px;
  margin-top: 0;
}
.footer {
  height: 40px;
  margin-top: 0;
  width: 100%;
  background: red;
  border: 0;
}



<body>
 <div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam  
  <div class="push"></div>
 </div>
 <div class="footer">Footer</div>
</body>