Question

我提前道歉，因为这可能是一个重新发布，但是我已经尝试了很多线程中的解决方案而没有找到解决问题的方法。

您可以在以下链接中查看我的文件。

https://www.dropbox.com/sh/ovom8y01p16iqri/AADtBbLW5aYmANsy7R_3x_Vga

问题是，当我重新调整网页大小变得更长但我的页脚保持原位时。我添加了两个媒体查询，我也需要页脚在这些中保持底部。

我非常感谢你们所能给予的任何帮助。

由于阿米特

编辑：

谢谢，我非常感谢所有的帮助。虽然我无法继续前进。

每当我尝试将解决方案应用到我的页面时，页脚就会转到页面顶部或卡在中间。

我想我可能做错了什么。我的所有文件都在这个下拉框中。

https://www.dropbox.com/sh/ovom8y01p16iqri/AADtBbLW5aYmANsy7R_3x_Vga

再次感谢

阿米特

Answer 1

您可以尝试将此作为参考。

DEMO

HTML

<html lang="en">
  <body>
    <div class="pageOuter">
      <div class="header"> Lorem ipsum </div>  
      <div class="midContent">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br/><a href="#" class="addMore" >Add more content</a><br/><a href="#" class="delete" >Delete Content</a></p>
      </div>  
      <div class="footer"> Lorem ipsum </div>
    </div>
  </body>
</html>

CSS

body {
  margin: 0;
}
body, html {
  height: 100%;
  min-height: 100%;
}
.pageOuter {
  position: relative;
  min-height: 100%;
}
.footer,
.header {
  padding: 10px;
  background:  #ccc ;
}
.midContent {
  padding: 10px 10px 70px 10px;
}
.footer {
  position:  absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

Answer 2

我已在我的页面中证明并且工作正常

在你的css中放上上面的代码

#footer {
    clear: both;
    padding: 6px 10px;
    text-align: right;

    position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

在您的页面中，您只能调用页脚样式

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

你就是！你有你的页脚...我希望我帮助你

页面调整大小时，需要页脚保持在内容之下

2 个答案: