Question

我有一个页脚样式的页脚浮动在页面底部但是当我重新调整浏览器窗口大小时，我的页脚重叠我的页面内容页脚虽然但是它不应该覆盖页面内容。

body {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
a {
  text-decoration: none;
  color: #64aba7;
}
strong {
  color: #fff
}
.container {
  min-height: 500px;
}
.header {
  margin-top: 60px;
}
.header,
img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.content {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  width: 500px;
}
.green-color {
  color: #25b04b;
}
.dark-green {
  color: #016838;
}
.footer {
  width: 100%;
  background: #00756f;
  position: absolute;
  bottom: 0;
}
.footer-container {
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 500px;
  padding-top: 20px;
}
.font-size-12px {
  font-size: 12px;
  color: #64aba7;
  font-weight: 50;
}
.one-third {
  width: 30%;
  float: left;
  margin-right: 3%;
  padding-bottom: 40px;
}

<div class="container">
  <div class="header">
    <img src="images/logo-large.png" alt="LegalHQ">
  </div>
  <div class="content">
    <h3 class="green-color">We are redevloping our website and will be back shortly</h3>
    <h4 class="dark-green"><i>In the meantime don't hesitate to call or email us</i></h4>
    <p class="dark-green">0330 999 1213
      <br /><a href="mailto:hello@legal-hq.co.uk">hello@legal-hq.co.uk</a>
    </p>
  </div>
  <div class="footer">
    <div class="footer-container">
      <div class="one-third img-div">
        <img src="images/small-logo.gif" alt="LegalHQ">
      </div>
      <div class="one-third font-size-12px">
        <strong>Legal HQ Limited</strong>
        <br />Virginia House
        <br />Floor 2
        <br />5-7 Great Ancoats Street
        <br />Manchester
        <br />M4 5AD
        <br />0161 974 0500
        <br />
        <a href="mailto:support@legal-hq.co.uk">support@legal-hq.co.uk</a>
        <br />
        <a href="www.legal-hq.co.uk">www.legal-hq.co.uk</a>
      </div>
      <div class="one-third font-size-12px">
        <strong>Legal HQ Limited</strong> is regulated by the Ministry of Justice in respect of regulated claims management activities. <strong>Authorisation Number: CRM30929</strong> 
        <a href="www.claimsregulation.gov.uk">www.claimsregulation.gov.uk</a>
      </div>
    </div>
  </div>
</div>

如果您想亲自体验，请link。尝试重新调整浏览器窗口的大小，使其看到页脚与主要内容重叠的位置。

Answer 1

给出html，身高100％，从容器中取出页脚，删除绝对位置，从div-children中删除浮点数，并向它们添加display：inline-block并给它们宽度为28％（或删除它们之间的空格）（或者你应该使用text-align：center for container ...但这是另一个故事）

浮动元素与主页面内容重叠

1 个答案: