Question

我试过我的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>

Answer 1

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

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

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

将页脚粘贴到页面底部：

使用此解决方案，页脚将始终粘贴到页面底部（而不是窗口）。如果您没有太多内容，页脚将位于窗口的底部，如果内容扩展，页脚将移动。

＆＃13;

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

＆＃13;

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

＆＃13;

Working Fiddle

将页脚粘贴到窗口底部：

使用position: fixed，第二个解决方案几乎与您的解决方案相同。为防止与内容重叠，请将padding-bottom上的.container设置为与页脚height相同的值。

＆＃13;

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

＆＃13;

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

＆＃13;

Working Fiddle

HTML页脚与内容重叠

3 个答案: