页脚部分与主体内容重叠

Question

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

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

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

为什么.body_wrapper{height:100%;} ？ 因为我有两个父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 es 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 es 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>