HTML 页脚与内容重叠

Question

我试过 html 页脚与正文容器重叠。

这里是我的 html 代码，带有页脚 css。

<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>

Answer 1

您需要重新设置样式。只需添加保证金：0；至 body。 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;
 }

Answer 2

重叠是固定页脚位置造成的。试试这个代码：

<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>

Answer 3

不太确定你想要什么。但是如果你想防止你的页脚与你的容器重叠，你可以用这些解决方案来解决它：

将页脚粘贴到页面底部：

使用此解决方案，页脚将始终贴在页面底部（而不是 window）。如果内容不多，页脚将位于 window 的底部，如果内容扩展，页脚将随之移动。

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

将页脚粘贴到 window 的底部：

第二个解决方案和你的几乎一样，使用position: fixed。为防止与内容重叠，您将 .container 上的 padding-bottom 设置为与页脚 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

HTML 页脚与内容重叠

HTML footer overlapping with content

html

css

footer