html - 元素无法在移动视图上正确显示
问题描述
我正在使用 CSS Grid 构建响应式网站模板，遇到了一个奇怪的问题。在桌面视图中，标有绿色的部分位于页面底部（如预期的那样）。
但在移动视图上，同一部分会上升并涵盖以前的元素：
我想这个问题是由 CSS 网格引起的，因为以前的元素（三张卡片）在移动和桌面视图上占用了不同的空间，但我不知道如何解决这个问题。在这种情况下排列元素的最正确方法是什么？
这是我的HTML和CSS分别：
HTML
<!DOCTYPE html>
<html lang="en">
<!-- Head section start -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/c23a6f5490.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/styles.css" />
</head>
<!-- Head section end -->
<body>
<!-- Header -->
<header id="first_header">
<!-- Modified bootstrap navbar -->
<nav class="regular navbar fixed-top">
<img src="images/header-logo.png" />
<span style="padding: 20px" class="navbar-brand mb-0 h1 mr-auto"
>FindHouse</span
>
<ul class="my_navlist">
<li class="nav-item">
<a class="nav-link" href="#">
Home <span><i class="fas fa-angle-down"></i></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
>Listing <span><i class="fas fa-angle-down"></i></span
></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
>Property <span><i class="fas fa-angle-down"></i></span
></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
>Pages <span><i class="fas fa-angle-down"></i></span
></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
>Blog <span><i class="fas fa-angle-down"></i></span
></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"
>Contact <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"
>Login/Register <span class="sr-only">(current)</span></a
>
</li>
<button class="create_listing_button">+Create Listing</button>
</ul>
</nav>
<div class="welcome_part">
<h1 style="font-weight: 800; text-align: center">
Find Your Dream Home
</h1>
<h5 style="text-align: center; padding-top: 1%">
From as low as $10 per day with limited time offer discounts
</h5>
<div class="buy_rent_buttons">
<button
style="border-radius: 3%; height: 3rem; width: 10rem"
type="button"
class="buy_rent btn btn-danger"
id="buy_rent"
>
Buy
</button>
<button
style="border-radius: 3%; height: 3rem; width: 10rem"
type="button"
class="buy_rent btn btn-danger"
id="buy_rent"
>
Rent
</button>
</div>
<div id="my_card" class="my_card card">
<div id="card-body" class="card-body">
<div class="col-xs-2">
<input
class="form-control"
type="text"
placeholder="Enter keyword..."
/>
</div>
<div class="btn-group">
<button
type="button"
class="btn btn-light dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Property type
</button>
<button
type="button"
class="btn btn-light dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Location
</button>
<button
type="button"
class="btn btn-light dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Price
</button>
<button
type="button"
class="btn btn-light dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Advanced
</button>
<button
style="border-radius: 3%; height: 3rem; width: 10rem"
type="button"
class="btn btn-danger"
>
Search
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Header end -->
<main>
<div class="feature_main">
<h2>Featured properties</h2>
<h5>Handpicked properties by our team</h5>
</div>
<!-- Section with cards starts -->
<div class="feature_box">
<!-- First card -->
<div style="z-index: -2" class="feature1">
<div class="card" style="width: 20rem">
<div
style="position: relative; padding: 3%; background-color: #e3e2e1"
class="card_body"
>
<h5
style="
color: #e3e2e1;
font-weight: bold;
left: 2rem;
top: 10rem;
z-index: 1;
position: absolute;
"
>
$7,000/mo
</h5>
<img
style="
border-radius: 3%;
opacity: 0.9;
max-height: 100%;
max-width: 100%;
"
class="card_image"
src="images/card_image.jpg"
/>
<button
style="
padding: 0;
height: 1.5rem;
width: 4rem;
top: 2rem;
right: 14rem;
position: absolute;
"
type="button"
class="btn btn-danger"
>
For Rent
</button>
<h5
style="
padding-top: 2%;
font-weight: 500;
color: #ff5a5f;
font-size: 0.9rem;
"
>
Apartment
</h5>
<h5 style="font-size: 1.2rem" class="card-title">
Renovated Apartment
</h5>
<h5 style="font-size: 0.8rem">
1421 San Pedro St, Los Angeles, CA 90015
</h5>
<h5
style="
display: flex;
justify-content: space-between;
font-size: 0.8rem;
"
>
<span>Beds: 4</span> <span>Baths:2</span>
<span>Sq Ft: 5280</span>
</h5>
<div
style="
justify-content: flex-start;
align-items: center;
display: flex;
padding-top: 8%;
"
class="author"
>
<img src="images/portrait.png" alt="" />
<span style="padding-left: 5%"
><h5 style="font-size: 0.8rem">John Smith</h5></span
>
</div>
<h5 style="padding-top: 8%; font-size: 0.8rem">4 years ago</h5>
</div>
</div>
</div>
<!-- Second card -->
<div style="z-index: -2" class="feature2">
<div class="card" style="width: 20rem">
<div
style="position: relative; padding: 3%; background-color: #e3e2e1"
class="card_body"
>
<h5
style="
color: #e3e2e1;
font-weight: bold;
left: 2rem;
top: 10rem;
z-index: 1;
position: absolute;
"
>
$120,000
</h5>
<img
style="
border-radius: 3%;
opacity: 0.9;
max-height: 100%;
max-width: 100%;
"
class="card_image"
src="images/house.jpg"
/>
<button
style="
padding: 0;
height: 1.5rem;
width: 4rem;
top: 2rem;
right: 14rem;
position: absolute;
"
type="button"
class="btn btn-danger"
>
For Sale
</button>
<h5
style="
padding-top: 2%;
font-weight: 500;
color: #ff5a5f;
font-size: 0.9rem;
"
>
Bungalo
</h5>
<h5 style="font-size: 1.2rem" class="card-title">
Renovated Apartment
</h5>
<h5 style="font-size: 0.8rem">
5821 J. Wesley St, Maiami, CA 9486
</h5>
<h5
style="
display: flex;
justify-content: space-between;
font-size: 0.8rem;
"
>
<span>Beds: 5</span> <span>Baths:3</span>
<span>Sq Ft: 8080</span>
</h5>
<div
style="
justify-content: flex-start;
align-items: center;
display: flex;
padding-top: 8%;
"
class="author"
>
<img src="images/portrait.png" alt="" />
<span style="padding-left: 5%"
><h5 style="font-size: 0.8rem">John Smith</h5></span
>
</div>
<h5 style="padding-top: 8%; font-size: 0.8rem">4 years ago</h5>
</div>
</div>
</div>
<!-- Third Card -->
<div style="z-index: -2" class="feature3">
<div class="card" style="width: 20rem">
<div
style="position: relative; padding: 3%; background-color: #e3e2e1"
class="card_body"
>
<h5
style="
color: #e3e2e1;
font-weight: bold;
left: 2rem;
top: 10rem;
z-index: 1;
position: absolute;
"
>
$13,000/mo
</h5>
<img
style="
border-radius: 3%;
opacity: 0.9;
max-height: 100%;
max-width: 100%;
"
class="card_image"
src="images/house2.jpg"
/>
<button
style="
padding: 0;
height: 1.5rem;
width: 4rem;
top: 2rem;
right: 14rem;
position: absolute;
"
type="button"
class="btn btn-danger"
>
For Rent
</button>
<h5
style="
padding-top: 2%;
font-weight: 500;
color: #ff5a5f;
font-size: 0.9rem;
"
>
Apartment
</h5>
<h5 style="font-size: 1.2rem" class="card-title">
Renovated Apartment
</h5>
<h5 style="font-size: 0.8rem">
1421 A. Lincoln St, Los Angeles, AK 45415
</h5>
<h5
style="
display: flex;
justify-content: space-between;
font-size: 0.8rem;
"
>
<span>Beds: 6</span> <span>Baths:3</span>
<span>Sq Ft: 7450</span>
</h5>
<div
style="
justify-content: flex-start;
align-items: center;
display: flex;
padding-top: 8%;
"
class="author"
>
<img src="images/portrait.png" alt="" />
<span style="padding-left: 5%"
><h5 style="font-size: 0.8rem">John Smith</h5></span
>
</div>
<h5 style="padding-top: 8%; font-size: 0.8rem">4 years ago</h5>
</div>
</div>
</div>
<div class="emptiness">
<h1></h1>
</div>
<div class="properties">
<h2>Find properties in these cities</h2>
<h5>Find one that suits your needs the best</h5>
</div>
</div>
</main>
<!-- Second section starts -->
<section id="second">
<div style="background-color: green" class="picturebox">
<div style="background-color: blue" class="picture1">picture1</div>
<div class="picture2">picture2</div>
<div class="picture3">picture3</div>
<div class="picture5">picture5</div>
</div>
</section>
<script src="js/main.js"></script>
</body>
</html>
CSS
body {
background-color: $myWhiteColor;
}
@media only screen and (max-width: 600px) {
body {
.nav-link {
display: none;
}
}
}
$myGrayColor: #484848;
$myWhiteColor: #dff2e4;
$myRedColor: #ff5a5f;
$myBlueColor: #007bff;
#first_header {
height: 100vh;
width: 100vw;
background-image: url(../images/house.jpg);
background-position: center;
background-size: cover;
opacity: 0.99;
color: $myWhiteColor;
font-family: 'Roboto', sans-serif;
};
.colored {
background-color: #212529;
}
.my_navlist {
display: flex;
flex-direction: row;
list-style-type: none;
}
.nav-link {
color: $myWhiteColor;
font-family: 'Roboto', sans-serif;
font-size: 1.02rem;
}
.create_listing_button {
border: none;
border-radius: 20em;
color: $myRedColor;
}
.nav-link:hover {
color: #292b2b;
}
.welcome_part {
display: flex;
flex-direction: column;
align-items: center;
height: 70vh;
justify-content: flex-end;
}
#my_card {
color: black;
margin-top: 2%;
height: 25%;
width: 80%;
}
#card-body {
display: flex;
align-items: center;
justify-content: space-around;
}
.feature_main {
display: flex;
padding-top: 4%;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
};
.feature_box {
display: grid;
padding-top: 5%;
align-items: center;
justify-items: center;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "feature1 feature2 feature3";
}
@media only screen and (max-width: 550px) {
.feature_box {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "feature1"
"feature2"
"feature3"
;
grid-gap: 0.2rem;
}
.regular {
display: none;
}
}
.properties {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 4rem;
width: 100%;
}
.picturebox {
display: grid;
height: 100vh;
padding-top: 5%;
align-items: center;
justify-items: center;
}
解决方案
也许尝试为被绿色覆盖的元素添加一个边距底部。您还可以使用 JavaScript 来检测用户设备是移动设备还是桌面设备，并为每个平台使用不同的 html。例如，如果您找到了一个修复程序，但它只适用于移动设备，您可以使用 JavaScript if 语句来检测用户设备是否是桌面移动设备，并拥有一个脚本，该脚本将为每个平台使用自定义 HTML 代码。对它做一些研究。
此外，您可以尝试检测设备的宽度和高度，以防用户的桌面屏幕很小或浏览器窗口太小。
推荐阅读
- c# - 为什么 EF Core 不允许我创建没有主键的属性？
- r - 在 glm() 函数中编辑“术语”对象
- sql-server - 报表生成器：如何在文本框之间有统一的水平间隙？
- elasticsearch - Solr eDismax Lucene 查询问题
- r - 在 R 中解释奇怪的 Bland-Altman 情节
- python - 如何使用另一个脚本在不同目录中执行一个 python 脚本？
- javascript - 不考虑整个 dom 的 querySelector
- architecture - 干净的独立架构
- node.js - CORS 502 网关错误，AWS Elastic Beanstalk Node.js 服务器，尽管 CORS 配置正确
- amazon-web-services - AWS 混合云负载平衡流量