让页脚不重叠的内容

问题描述：

我在这里有两个复杂的问题，首先是如何确保页脚不与我的文章的内容重叠。现在看来重叠它上面的东西，我似乎无法使滚动条与overflow: auto;让页脚不重叠的内容

另外，我该如何让<hr>标签工作监守现在看来搞糟我的整个Flexbox的，而且只以上徘徊第一个联系页脚细节。

非常感谢您的帮助！

#footer { 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t left: 20%; 
 
\t \t \t \t bottom: 0%; 
 
\t \t \t \t width: 50%; 
 
\t \t \t \t height: 20%; 
 
\t \t \t \t display: flex; 
 
\t \t \t \t justify-content: space-between; 
 
\t \t } 
 

 
\t \t .contact_footer { 
 
\t \t \t \t margin-left: 20%; 
 
    }

<footer> 
 
    <div id="footer"> 
 
     <div class="container"> 
 
      <div class="contact_footer"> 
 
      <hr> 
 
       <h3>Contact</h3> 
 
       <address> 
 
       info 
 
       </address> 
 
      </div> 
 
      <div class="contact_footer"> 
 
       <h3>Address</h3> 
 
       <address> 
 
       info 
 
       </address> 
 
      </div> 
 
     </div> 
 
    </div>  
 
</footer>

答

如果你绝对位置的任何，它是从正常的布局中移除。如果你不想让它与下面的任何东西重叠，你需要确保它下面没有任何东西。这不是对您的页脚进行调整，而是对您的内容进行调整。

尝试这样的事情（选择必须与你更换）：

#content { 
    margin-bottom: 20vh; 
}

20vh是屏幕的高度，20％的可能是你的footer（代码大小不清楚你的footer所处的位置）。

答

做一两件事，对于第二个问题

使用伪类'：第一，孩子只有第一页脚内容CSS和使用“边界顶”式的属性，而不是“人力资源”标签

.contact_footer:first-child address{border-bottom:1px solid black;}

让页脚不重叠的内容

相关推荐