在页脚放置页脚,而在调整大小时不隐藏页面内容

问题描述 投票:0回答:1

[我希望页脚停留在页面的底部,我添加了: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>

Pen

css
1个回答
0
投票

有一个包装元素,其中保留了页脚以外的所有内容。它的负边距等于页脚的高度。!-开始代码段:js隐藏:虚假控制台:真babel:假->

$("#add").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>").insertBefore(".push");
});
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;}
<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">     
</div>
  </div>
  <footer class="footer"></footer>
</body>
© www.soinside.com 2019 - 2024. All rights reserved.