Question

我在标题部分有一个背景图片，并且Text是div的水平和垂直中心。我在页脚部分遇到了一些问题。

页脚部分覆盖了正文内容。

为什么要覆盖？因为我已经使用.body_wrapper{height:100%;}来显示背景图像。如果我删除了height:100%，则不会出现重叠问题，但标题图像不会显示。

为什么.body_wrapper{height:100%;}？因为我有两个父级。

您能帮我吗？

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.main_wrapper {
  display: inline;
}

.body_wrapper {
  height: 100%;
  min-height: 100%;
  width: 100%;
  margin-top: 90px;
}

.bg_contact {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://wallpaper-house.com/data/out/6/wallpaper2you_106757.jpg');
}

.banner_bg {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  min-height: 100%;
}

.contact_header_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

.contact_header_content h2 {
  font-size: 38px;
  color: #fff;
}

.contact_header_content p {
  font-size: 22px;
  color: #fff;
  padding: 25px 0;
}

.contact_header {
  position: relative;
}

#footer {
  background-color: #222;
  width: 100%;
}

<div class="main_wrapper">
  <div class="body_wrapper">
    <div class="bg_contact banner_bg contact_header">
      <div class="contact_header_content">
        <h2>We sould love to hear back from you.</h2>
        <p>Whether you have question about features, pricing, need a demo or anything e s Our team is ready to answer all your questions. </p>
        <div class="btn_slider">
          <a href="#" class="i_btn i_btn_bg text_cap">Contact Us</a>
        </div>
      </div>

    </div>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </section>
  </div>

  <div id="footer">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Answer 1

我认为您已经将页脚div 放在了 body_wrapper div

之外

我已修改您的代码段，请检查并告知我

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.main_wrapper {
  display: inline;
}

.body_wrapper {
  height: 100%;
  min-height: 100%;
  width: 100%;
  margin-top: 90px;
}

.bg_contact {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://wallpaper-house.com/data/out/6/wallpaper2you_106757.jpg');
}

.banner_bg {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  min-height: 100%;
}

.contact_header_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

.contact_header_content h2 {
  font-size: 38px;
  color: #fff;
}

.contact_header_content p {
  font-size: 22px;
  color: #fff;
  padding: 25px 0;
}

.contact_header {
  position: relative;
}

#footer {
  background-color: #222;
  width: 100%;
}

<div class="main_wrapper">
    <div class="body_wrapper">
        <div class="bg_contact banner_bg contact_header">
            <div class="contact_header_content">
                <h2>We sould love to hear back from you.</h2>
                <p>Whether you have question about features, pricing, need a demo or anything e s Our team is ready to answer all your questions. </p>
                <div class="btn_slider">
                    <a href="#" class="i_btn i_btn_bg text_cap">Contact Us</a>
                </div>
            </div>

        </div>
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </section>
        <div id="footer">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</div>

页脚部分与正文内容重叠

1 个答案: