移动端使用定位后位置空出来的问题及解决方法

HTML部分

<div class="gameDownload">
			<div class="publicTitle flex">
				<p>游戏下载</p>
				<p><a href="#">更多</a></p>
			</div>
			<div class="gameDownloadType">
				<p class="gameDownloadTypeColor">角色扮演</p>
				<p>动作冒险</p>
				<p>体育竞技</p>
				<p>经营策略</p>
				<p>角色扮演</p>
				<p>动作冒险</p>
				<p>体育竞技</p>
				<p>经营策略</p>
				<p>角色扮演</p>
			</div>
			<div class="gameDownloadListAll">
				<div class="gameDownloadContent gameDownloadShow">
					<div class="gameDownloadList">
						<div class="tuijianGameList">
							<div class="tuijianGameListLeft">
								<img src="/Images/hotGameTuijian2.png" alt="">
							</div>
							<div class="tuijianGameListRight">
								<div>
									<p>111崩坏三</p>
									<p>角色扮演 | 893.3MB</p>
									<p>为世界上所有的美好而战</p>
								</div>
								<a href="#">下载</a>
							</div>
						</div>
					</div>
					<div class="gameDownloadList">
						<div class="tuijianGameList">
							<div class="tuijianGameListLeft">
								<img src="/Images/hotGameTuijian2.png" alt="">
							</div>
							<div class="tuijianGameListRight">
								<div>
									<p>崩坏三</p>
									<p>角色扮演 | 893.3MB</p>
									<p>为世界上所有的美好而战</p>
								</div>
								<a href="#">下载</a>
							</div>
						</div>
					</div>
					<div class="gameDownloadList">
						<div class="tuijianGameList">
							<div class="tuijianGameListLeft">
								<img src="/Images/hotGameTuijian2.png" alt="">
							</div>
							<div class="tuijianGameListRight">
								<div>
									<p>崩坏三</p>
									<p>角色扮演 | 893.3MB</p>
									<p>为世界上所有的美好而战</p>
								</div>
								<a href="#">下载</a>
							</div>
						</div>
					</div>
					<div class="gameDownloadList">
						<div class="tuijianGameList">
							<div class="tuijianGameListLeft">
								<img src="/Images/hotGameTuijian2.png" alt="">
							</div>
							<div class="tuijianGameListRight">
								<div>
									<p>崩坏三</p>
									<p>角色扮演 | 893.3MB</p>
									<p>为世界上所有的美好而战</p>
								</div>
								<a href="#">下载</a>
							</div>
						</div>
					</div>
					<div class="gameDownloadList">
						<div class="tuijianGameList">
							<div class="tuijianGameListLeft">
								<img src="/Images/hotGameTuijian2.png" alt="">
							</div>
							<div class="tuijianGameListRight">
								<div>
									<p>崩坏三</p>
									<p>角色扮演 | 893.3MB</p>
									<p>为世界上所有的美好而战</p>
								</div>
								<a href="#">下载</a>
							</div>
						</div>
					</div>
				
					<div class="gameDownloadList">
						<div class="tuijianGameList">
							<div class="tuijianGameListLeft">
								<img src="/Images/hotGameTuijian2.png" alt="">
							</div>
							<div class="tuijianGameListRight">
								<div>
									<p>崩坏三</p>
									<p>角色扮演 | 893.3MB</p>
									<p>为世界上所有的美好而战</p>
								</div>
								<a href="#">下载</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

CSS部分

.gameDownload {
	height: 5rem;
}
.gameDownloadType {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	overflow-x: scroll;
	margin-bottom: .22rem;
}
.gameDownloadType::-webkit-scrollbar {
	display: none;
}
.gameDownloadType p {
	flex-shrink: 0;
	font-size: .14rem;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
	margin-right: .3rem;
}
.gameDownloadTypeColor {
	font-size: .16rem;
	font-weight: bold !important;
	margin-right: .22rem !important;
}
.gameDownloadListAll {
	display: flex;
}
.gameDownloadContent  {
	flex-shrink: 0;
	display: none;
	flex-direction: column;
	flex-wrap: wrap;
	height: 4.25rem;
	overflow-x: scroll;
}
.gameDownloadContent::-webkit-scrollbar {
	display: none;
}
.gameDownloadList {
	flex-shrink: 0;
	width: 88%;
	margin-right: .2rem;
}
.gameDownloadShow {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;
	overflow-x: scroll;
}
.tuijianGameList {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: .7rem;
	margin-bottom: .15rem;
}
.tuijianGameListLeft {
	display: flex;
	width: .7rem;
	height: .7rem;
}
.tuijianGameListLeft img {
	width: .7rem;
	height: .7rem;
}
.tuijianGameListRight {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: .7rem;
	margin-left: .1rem;
}
.tuijianGameListRight div {
	height: .7rem;
}
.tuijianGameListRight div p:nth-child(1) {
	font-size: .14rem;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
	margin-top: .1rem;
}
.tuijianGameListRight div p:nth-child(2),.tuijianGameListRight div p:nth-child(3) {
	font-size: .1rem;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	margin-top: .04rem;
}
.tuijianGameListRight a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: .64rem;
	height: .27rem;
	font-size: .14rem;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	background: #01ADB4;
	opacity: 1;
	border-radius: .14rem;
}

JavaScript部分
此处rem与px转换大小请查看此文章：rem与px的转换.

window.onload = function(){
		changeHeight();
	}
	 function changeHeight(){
		var width = document.body.clientWidth;
        var gameDownloadListAll = document.querySelector(".gameDownload .gameDownloadListAll");
        var gameDownloadShow = document.querySelector(".gameDownload .gameDownloadShow");
        gameDownloadListAll.style.height = (gameDownloadShow.offsetHeight/100/(width/375))+'rem';
		console.log(gameDownloadListAll.style.height);
    }