所以我在移动设备上适配网页时遇到了问题。在 PC 上它可以正常工作,但当我在移动设备上尝试时,它不会完全适合屏幕,但不知何故溢出?它在右侧创建空白区域。我正在使用基本的 html/css 并使用 Asp.Net 开发网站。但这 99% 都是 html/css 的问题。重要的是,没有任何内容溢出实际窗口大小,它只是空白区域。
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="~/styles/header.css">
<link rel="stylesheet" href="~/styles/footer.css>
<link rel="stylesheet" href="~/styles/general_index.css">
<link rel="stylesheet" href="~/styles/index_page.css">
</head>
<body>
<div class="background-container">
</div>
</body>
</html>
general_index.css
body {
margin: 0;
padding: 0;
position: relative;
background-color: #FDF1E6;
font-family: Outfit, Arial, Helvetica, sans-serif;
font-style: normal;
color: #FFFFFF;
width: 100%; /* take full browser width */
height: 100%;
}
.background-container {
background-image: url("../background.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
flex-direction: column;
position: relative;
padding-bottom: 650px;
}
body::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.0);
z-index: -1;
}
问题可能是 padding-bottom: 650px;您正在使用的。
考虑使用百分比或基于视口的高度 (vh),以确保问题不会再次发生。
减少、删除或使用百分比或基于视口的高度,而不是 padding-bottom: 650px;并查看您存档的内容