讓頁腳不重疊的內容

Question

我在這裏有兩個複雜的問題，首先是如何確保頁腳不與我的文章的內容重疊。現在看來重疊它上面的東西，我似乎無法使滾動條與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>

Answer 1

如果你絕對位置的任何，它是從正常的佈局中移除。如果你不想讓它與下面的任何東西重疊，你需要確保它下面沒有任何東西。這不是對您的頁腳進行調整，而是對您的內容進行調整。

嘗試這樣的事情（選擇必須與你更換）：

#content { 
    margin-bottom: 20vh; 
} 

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

Answer 2

做一兩件事，對於第二個問題

使用僞類'：第一，孩子只有第一頁腳內容CSS和使用「邊界頂」式的屬性，而不是「人力資源」標籤

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