與頁面內容重疊的HTML頁腳

這裏我的腳本CSS的HTML代碼。

<html> 
    <head> 
    <style> 
     .footer {position: fixed;overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}  
    </style> 
    </head> 
<body> 

     <div class="container"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </div><br> 
<div class="footer"> 
     <ul class="copy inline text-center"> 
     <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
     <li>All Rights Reserved</li> 
     </ul> 
</div> 
</body> 
</html>

來源

2017-02-11 Anandha Kumar

這裏看看寬度在底部保證金http://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page – Daniel

你已經將腳註設置爲'固定''底部：0'。這將使您的頁腳始終堅持屏幕底部。如果「容器」中有大量內容，則頁腳會重疊。通過刪除'位置：固定'來修復它＃ – TheYaXxE

Stack Overflow旨在幫助程序員更好地工作，而不是提供免費的編碼服務。如果你不明白'CSS'是什麼，你幾乎沒有資格成爲程序員。從我的角度來看，你只是一個試圖完成任務而不付錢的客戶。如果你實際上是一個試圖學習的程序員，那麼SO並不是最好的開始。你需要先學習基礎知識。此外，Google上的簡單搜索將爲您提供答案。 –

不完全確定你想要什麼。但是，如果你想避免讓自己的頁腳重疊容器時，您可以使用這些解決方案解決這個問題：

棒頁腳頁面的底部：

通過這一解決方案，頁腳將始終堅持底部（不是窗口）。如果頁面內容不多，頁腳將位於窗口底部，如果內容擴展，頁腳將會移動。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    min-height: 100%; 
 
    height: auto; 
 
    margin-bottom: -60px; 
 
    box-sizing: border-box; 
 
} 
 

 
.container:after { 
 
    display: block; 
 
    content: ''; 
 
    height: 60px; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.footer { 
 
    height: 60px; 
 
    background: red; 
 
}

<div class="container"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 
<div class="footer"> 
 
    <ul class="copy inline text-center"> 
 
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
 
    <li>All Rights Reserved</li> 
 
    </ul> 
 
</div>

Working Fiddle

棒頁腳窗口的底部：

第二種解決方案是幾乎一樣的你，使用position: fixed。爲防止與內容重疊，您將padding-bottom設置爲.container，與您的頁腳height的值相同。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    padding-bottom: 60px; 
 
    box-sizing: border-box; 
 
} 
 

 
.footer { 
 
    height: 60px; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 9999; 
 
    background: red; 
 
}

<div class="container"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 
<div class="footer"> 
 
    <ul class="copy inline text-center"> 
 
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
 
    <li>All Rights Reserved</li> 
 
    </ul> 
 
</div>

Working Fiddle

來源

2017-02-11 17:45:01 TheYaXxE

您需要重置樣式。只需添加邊距：0;身體。 https://jsfiddle.net/36q5a7kw/

 <div class="container"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </div><br> 
<div class="footer"> 
     <ul class="copy inline text-center"> 
     <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
     <li>All Rights Reserved</li> 
     </ul> 
</div> 


body{ 
    margin: 0; 
} 
.footer { 
    position: fixed; 
    overflow: hidden; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 9999; 
}

來源

2017-02-11 17:16:32

重疊是由固定頁腳的位置引起的。試試這個代碼：

<html> 
<head> 
<style> 
     </style> 
.footer {overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}  

</head> 
<body> 

    <div class="container"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div><br> 
<div class="footer"> 
    <ul class="copy inline text-center"> 
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li> 
    <li>All Rights Reserved</li> 
    </ul> 
</div> 
</body> 
</html>

來源

2017-02-11 17:22:13 GeorgeDopeG

與頁面內容重疊的HTML頁腳

回答

相關問題