javascript - 粘性页脚 Div 重叠

Question

我正在尝试制作一个具有固定页眉/页脚的“水平滚动”网站，我让它几乎正常工作，但如果屏幕较小，页脚会保持重叠的内容 div。

我正在使用 jquery + scrollto ( https://www.queness.com/resources/html/scroll/js/jquery.scrollTo.js) 脚本在用户点击导航链接时使页面产生很好的效果。

在 fiddle 上，它看起来甚至连 Logo 都被重叠了，但在我的测试中却没有，当我在较小的屏幕上加载网站时，页脚与所有 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">
				&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 -->

请告诉我如何解决 div 重叠问题。谢谢!

Answer 1

为#footer-rectangle 删除 min-height: 65px 或使用 CSS 媒体查询。例如，对于最大宽度为 480 像素的设备，使用下面的代码。

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

看看这个页面:Media Queries for Standard Devices