粘性页脚Div重叠

Question

I'm trying to make a "horizontally scrolling" web site with a fixed header/footer, I have it almost working except for that footer that keeps overlapping content div if the screen is smaller.

I am using jquery + scrollto ( https://www.queness.com/resources/html/scroll/js/jquery.scrollTo.js ) scripts to make a nice effect of the pages as the user clicks on the nav links.

On the fiddle it looks like even the logo is being overlapped but on my tests it's not, the footer overlaps all divs when I am load the site on a smaller screen. Anyway here the site I'm working on: https://jsfiddle.net/p33nw6gg/17/

Here is the CSS

 html, body { color: #fafafa; height: 100%; width: 100%; margin: 0; padding: 0; background: #3a3a3a; } #logo-rectangle { top: 20px; left: 50%; width: 75%; text-align: center; position: fixed; transform: translateX(-50%); /* Background */ background-color: rgba(0, 154, 236, 0.8); /* Top, Right, Bottom, Left */ padding: 10px 0px 10px 0px; } #footer-rectangle { bottom: 20px; left: 50%; width: 75%; min-height: 65px; text-align: center; position: fixed; transform: translateX(-50%); /* Background */ background-color: rgba(0, 154, 236, 0.8); /* Top, Right, Bottom, Left */ padding: 10px 0px 10px 0px; } .nav { width: 70%; text-align: center; /* Top, Right, Bottom, Left */ margin: 20px auto 20px auto; } /* Horizontal Scroll */ #mask { width: 500%; height: 100%; } .page { float: left; width: 20%; height: 100%; padding-top: 100px; } .content { width: 75%; min-height: 300px; position: relative; margin: 0 auto; /* Borders */ border-radius: 4px; border: 1px solid #fafafa; /* Background */ background-color: rgba(132, 132, 132, 0.8); } .clear { clear: both; } 

  <!-- Start Background Wrapper --> <div id="bg"> <!-- Start Mask --> <div id="mask"> <!-- Start Logo Rectangle --> <div id="logo-rectangle"> <img src="images/logo.png" alt="Logo"> </div> <!-- End Logo Rectangle --> <!-- Start Page 1 --> <div id="item1" class="page"> <a name="item1"></a> <div class="content"> <!-- Start Nav --> <div class="nav"> <a href="#item1" title="Home" class="panel">Home</a> <a href="#item2" title="Services" class="panel">Services</a> <a href="#item3" title="Contact Us" class="panel">Contact Us</a> </div> <!-- End Nav --> <div class="body-container"> <p>Home Page</p> </div> </div> </div> <!-- End Page 1 --> <!-- Start Page 2 --> <div id="item2" class="page"> <a name="item2"></a> <div class="content"> <!-- Start Nav --> <div class="nav"> <a href="#item1" title="Home" class="panel">Home</a> <a href="#item2" title="Services" class="panel">Services</a> <a href="#item3" title="Contact Us" class="panel">Contact Us</a> </div> <!-- End Nav --> <p>Services Page</p> </div> </div> <!-- End Page 2 --> <!-- Start Page 3 --> <div id="item3" class="page"> <a name="item3"></a> <div class="content"> <!-- Start Nav --> <div class="nav"> <a href="#item1" title="Home" class="panel">Home</a> <a href="#item2" title="Services" class="panel">Services</a> <a href="#item3" title="Contact Us" class="panel">Contact Us</a> </div> <!-- End Nav --> <p>Contact Us Page</p> </div> </div> <!-- End Page 3 --> <!-- Start Footer Rectangle --> <div id="footer-rectangle"> &copy; Copyright. All Rights Reserved. </div> <!-- End Footer Rectangle --> </div> <!-- End Mask --> </div> <!-- End Background Wrapper --><!-- Start Background Wrapper --> <div id="bg"> <!-- Start Mask --> <div id="mask"> <!-- Start Logo Rectangle --> <div id="logo-rectangle"> <img src="images/logo.png" alt="Logo"> </div> <!-- End Logo Rectangle --> <!-- Start Page 1 --> <div id="item1" class="page"> <a name="item1"></a> <div class="content"> <!-- Start Nav --> <div class="nav"> <a href="#item1" title="Home" class="panel">Home</a> <a href="#item2" title="Services" class="panel">Services</a> <a href="#item3" title="Contact Us" class="panel">Contact Us</a> </div> <!-- End Nav --> <div class="body-container"> <p>Home Page</p> </div> </div> </div> <!-- End Page 1 --> <!-- Start Page 2 --> <div id="item2" class="page"> <a name="item2"></a> <div class="content"> <!-- Start Nav --> <div class="nav"> <a href="#item1" title="Home" class="panel">Home</a> <a href="#item2" title="Services" class="panel">Services</a> <a href="#item3" title="Contact Us" class="panel">Contact Us</a> </div> <!-- End Nav --> <p>Services Page</p> </div> </div> <!-- End Page 2 --> <!-- Start Page 3 --> <div id="item3" class="page"> <a name="item3"></a> <div class="content"> <!-- Start Nav --> <div class="nav"> <a href="#item1" title="Home" class="panel">Home</a> <a href="#item2" title="Services" class="panel">Services</a> <a href="#item3" title="Contact Us" class="panel">Contact Us</a> </div> <!-- End Nav --> <p>Contact Us Page</p> </div> </div> <!-- End Page 3 --> <!-- Start Footer Rectangle --> <div id="footer-rectangle"> &copy; Copyright. All Rights Reserved. </div> <!-- End Footer Rectangle --> </div> <!-- End Mask --> </div> <!-- End Background Wrapper --> 

Please let me know how I can fix the div overlapping issue. Thank you!

Answer 1

Either remove the min-height: 65px for the #footer-rectangle or use CSS Media Queries. Use, for example, the code below for devices with a max width of 480px.

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

Take a look at this page: Media Queries for Standard Devices