底部的页脚使用位置：固定但保持间距答案

【问题标题】：Footer at the bottom using position:fixed but maintaining space-between底部的页脚使用位置：固定但保持间距
【发布时间】：2019-06-01 03:20:08
【问题描述】：

我正在尝试将页脚设置在页面底部，并且我设法使用 CSS 属性“position:fixed”和“bottom:0”来做到这一点。但是，通过这样做，我的两个页脚 DIV 之间不再有空格。我一直在解决这个问题。

我的html：

<div class="footer">
  <div class="footer-links">
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-facebook"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-linkedin"></i></a>
  </div>
  <div class="footer-copyright">
     <%= link_to "Creato da: F & F", poetries_path =%>

  </div>
</div>

我的 CSS：

.footer {
  background: #F4F4F4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding: 0px 50px;
  color: rgba(0,0,0,0.3);
  position:fixed;
  bottom:0;
}
.footer-links {
  display: flex;
  align-items: center;
}
.footer-links a {
  color: black;
  opacity: 0.15;
  text-decoration: none;
  font-size: 24px;
  padding: 0px 10px;
}
.footer-links a:hover {
  opacity: 1;
}
.footer .fa-heart {
  color: #D23333;
}

基本上我想要页面左下角的 DIV footer-links 和右下角的 DIV footer-copyright。但是，即使我使用space-between，它们现在都在左下角

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将一个包装元素（即DIV）放入您的.footer-copyright DIV，包含/包装页脚应包含的两个元素，并将您之前为.footer-copyright 使用的CSS 应用到它，即：

.wrapper_inside_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%
}

(height: 100%是让它扩展到页脚的全高，使垂直居中正确)

【讨论】：

【解决方案2】：

我的意思是我做了我所做的事？

  body {
    margin: 0;
    padding: 0;
  }
  .footer {
    background: #f4f4f4;
    height: 100px;
    padding:0 15px;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.3);
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-links {
    display: flex;
    align-items: center;
  }
  .footer-links a {
    color: black;
    opacity: 0.15;
    text-decoration: none;
    font-size: 24px;
    padding: 0px 10px;
  }
  .footer-links a:hover {
    opacity: 1;
  }
  .footer .fa-heart {
    color: #d23333;
  }

<div class="footer">
  <div class="footer-links">
    <a href="#"><i class="fab fa-instagram"></i> I</a>
    <a href="#"><i class="fab fa-facebook"></i> F</a>
    <a href="#"><i class="fab fa-twitter"></i> T</a>
    <a href="#"><i class="fab fa-linkedin"></i> L</a>
  </div>
  <div class="footer-copyright">
     <%= link_to "Creato da: F & F", poetries_path =%>

  </div>
</div>

【讨论】：