与页面内容重叠的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页脚

回答

相关问题