调整大小时将页脚放在底部而不隐藏页面内容答案

【问题标题】：Put footer at buttom without hiding page content when resizing调整大小时将页脚放在底部而不隐藏页面内容
【发布时间】：2019-11-19 15:38:01
【问题描述】：

我希望页脚卡在页面的底部，我添加了：buttom:0px; 并将其设为position:fixed;，但是当我调整窗口大小时，页脚隐藏了其他内容（我希望它留在底部）：

enter image description here

我也尝试使用position:static;，但它改变了选定的高度：

enter image description here

这里代码：

footer {
    font-size: 14px;
    color: gray;
    border-top: 1px solid #2672fb;
    bottom: 0px;
    width: 100%;
    height: 2.5rem;
   position:static;
}
<body>
<div>
...
</div>
<footer>
  <p>Lorem ipsum dolor ...</p>
</footer>
</body>

【问题讨论】：

这能回答你的问题吗？ Bootstrap 3 Flush footer to bottom. not fixed
@Porky 回答了你的问题

标签： css

【解决方案1】：

有一个包装元素可以容纳除页脚之外的所有内容。它的负边距等于页脚的高度。 !-- begin sn-p: js hide: false 控制台: true babel: false -->

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;


  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
.footer,
.push {
   width:100%;
   height:100px;
}
.footer{
background-color:yellow;}

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <body>
    <button id="add">Add Data</button>
      <div class="wrapper">
        <div class="push"> 
<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>
<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>
<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>
<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>    
    </div>
      </div>
      <footer class="footer"></footer>
    </body>

【讨论】：

问题没有jQuery标签
我只是使用 jquery 来添加内容
已编辑如果您对我的问题投了反对票，请收回您的反对票