在移动端页面中头部或者底部加上固定单位的一些问题

最新推荐文章于 2022-09-21 09:31:42 发布

User_XuKang

最新推荐文章于 2022-09-21 09:31:42 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/User_XuKang/article/details/121034966

版权

问题在头部或者底部加上固定单位，可能会导致中间的内容被头部或者底部覆盖

解决方法：

html部分：

		<div class="content">
			<!-- 头部 -->
			<header>
				<div class="header">
					<h1>111</h1>
				</div>
				<div class="placeholder"></div>
			</header>
			<!-- 头部 -->
			<!-- 内容 -->
			<section>
				<div class="page-wrapper">
					<div>

					</div>
				</div>
			</section>
			<!-- 内容 -->
			<!-- 底部 -->
			<footer>
				<div class="footer">
					<h1>111</h1>
				</div>
				<div class="placeholder"></div>
			</footer>
			<!-- 底部 -->
		</div>

css部分：

* {
				margin: 0;
				padding: 0;
			}

			body {
				background: rgba(102, 102, 102, 0.397);
				width: 100%;
				overflow-x: hidden;
			}

			.content {
				display: block;
			}

			h1 {
				font-size: 0.3rem;
			}

			.header {
				background: #fff;
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				height: 50px;
				line-height: 50px;
			}

			.footer {
				background: #fff;
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
				height: 50px;
				line-height: 50px;
			}

			.placeholder {
				width: 100%;
				height: 50px;
				height: calc(50px + constant(safe-area-inset-top));
				height: calc(50px + env(safe-area-inset-top));
			}

			.page-wrapper {
				height: calc(100% - 50px - 50px);
				height: calc(100% - 50px - constant(safe-area-inset-top) - 50px - constant(safe-area-inset-bottom));
				height: calc(100% - 50px - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom));
				display: block;
				position: relative;
			}

			section {
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				position: relative;
				z-index: -999;
			}