我有一個帶有全屏滾動部分的 1 頁網站。每個部分在桌面上都能正確顯示，但在移動設備上，“團隊”部分的頂部和底部都有一個白色塊。
我為團隊制作了另一個部分（'team2test'），僅在移動設備上使用 - 使用 HTML 嘗試使部分全高，但背景影像不是全屏
請協助解釋為什么“團隊”部分的頂部和底部有間隙 - 或者為什么我的背景圖片在“team2test”中不是全屏
“team2Test”的代碼：
body,
html {
height: 100%;
margin: 0;
}
.team-images-mobile {
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 200px;
height: 200px;
}
.team-section {
background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">
<div class="team-images-mobile">
<img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
<img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
<img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
</div>
</div>
uj5u.com熱心網友回復：
你的問題來自：
- 為什么“團隊”部分頂部和底部有間隙
這來自你的填充
.team-images-mobile {
padding: 10px;
}
- 為什么我的背景圖片不是全屏的
這來自height: 100vh你設定的.team-section
body,
html {
height: 100%;
margin: 0;
}
.team-images-mobile {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.team-section {
background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.team-section img {
width: inherit;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-section">
<div class="team-images-mobile">
<img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" >
<img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt="">
<img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt="">
</div>
</div>uj5u.com熱心網友回復：
您的“團隊部分”的 HTML 現在如下所示：
<div class="grve-column wpb_column grve-column-1">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
<h2 style="text-align: center;">Team</h2>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<div class="team-section">
<div class="team-images-mobile">
...
</div>
</div>
</div>
</div>
<div class="grve-empty-space grve-height-1x" style=""></div>
</div>
</div>
如果您檢查瀏覽器檢查器，您會發現.grve-element（標題文本“團隊”）.team-section在代碼中實際占用空間之前占用了空間。該元素具有白色背景。
所以你的.team-section風格并不重要。這更像是一個 HTML 結構問題。
有兩個方向可以解決這個問題：
- 如果您可以控制整體 HTML，只需將您的 .team-section 背景 css 設定移動到
.grve-column關卡；或者 .grve-element通過將其設定為“位置：絕對；寬度：100%；”來使高度為 0。您需要提供.team-images-mobile一些填充，以免它們與“團隊”重疊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/420978.html
標籤：
上一篇：.Net6System.IO.Compression問題是否有任何解決方法。DeflateStream.Read方法在.Net6中作業不正確，但在舊版本中作業正常