我试图做一个＆＃34;水平滚动＆＃34;网站有一个固定的页眉/页脚，我有几乎工作，除了该页脚，如果屏幕较小，保持重叠的内容div。
我正在使用jquery + scrollto（https://www.queness.com/resources/html/scroll/js/jquery.scrollTo.js）脚本，以便在用户点击导航链接时对页面产生很好的效果。
在小提琴上看起来甚至徽标都是重叠的，但在我的测试中它没有，当我在较小的屏幕上加载网站时，页脚重叠所有div。无论如何，我在这里工作的网站： https://jsfiddle.net/p33nw6gg/17/
这是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">
© 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">
© Copyright. All Rights Reserved.
</div>
<!-- End Footer Rectangle -->
</div>
<!-- End Mask -->
</div>
<!-- End Background Wrapper -->
请告诉我如何解决div重叠问题。谢谢！
答案 0 :(得分：0)
删除＃footer-rectangle的最小高度：65px或使用CSS Media Queries。例如，对于最大宽度为480px的设备，请使用以下代码。
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}