我的页面底部有大量空白区域。我不知道为什么。我试过调整图像和主体的边距和填充，空白区域没有变小。我的代码非常幼稚。我看不出是什么导致了大量的空白。我只有一个图像元素和四个段落元素。我猜它与 CSS 中的 position 属性有关。我不知道。我已经为此工作了三天。请帮忙。
body {
color: #555;
}
img {
width: 100%;
height: 100%;
/*z-index: 0;*/
display: inline-block;
}
.tint {
position: relative;
box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
}
.wrap {
overflow: hidden;
margin: 0 auto;
}
.tint:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
transition: all .3s linear;
}
.tint:hover:before {
background: none;
}
.enter {
font-size: 24px;
/*z-index: 1;*/
color: white;
position: relative;
left: 58em;
top: -6em;
}
.week {
font-size: 20px;
font-family: Arial;
/*z-index: 2;*/
color: white;
top: -28.7em;
left: 7.4em;
position: relative;
}
#line {
position: relative;
/*z-index: 1;*/
color: white;
width: 10%;
left: -33em;
top: -37em;
}
.team {
position: relative;
font-size: 38px;
color: white;
top: -18em;
left: 4em;
font-family: Adobe Fan Heiti Std;
}
.percent {
position: relative;
font-size: 92px;
font-family: Arial;
top: -8.5em;
left: 2em;
color: white;
} <!DOCTYPE html>
<html>
<head>
<title>Second Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="pageTwo.css">
</head>
<body>
<div class="wrap">
<img src="think-og-image.jpg" alt="think" class="tint">
</div>
<p class="week">This Week</p>
<hr id="line">
<p class="enter">Enter</p>
<p class="team">Team Engagement</p>
<p class="percent">67%</p>
</body>
</html>
最佳答案
position:relative 导致了问题。而不是将 position 赋予所有 p 元素，我将它们放在 div 中，并使用 banner-content css 和将 position:absolute 赋给 banner-content。并相应地对齐它。希望这可以帮助。谢谢
body {
color: #555;
}
img {
width: 100%;
height: 100%;
display: inline-block;
}
.tint {
position: relative;
box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
}
.wrap {
overflow: hidden;
margin: 0 auto;
position: relative;
}
.tint:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
transition: all .3s linear;
}
.tint:hover:before {
background: none;
}
.enter {
font-size: 24px;
color: white;
}
.week {
font-size: 20px;
font-family: Arial;
color: white;
}
#line {
color: white;
width: 10%;
}
.team {
font-size: 38px;
color: white;
font-family: Adobe Fan Heiti Std;
}
.percent {
font-size: 92px;
font-family: Arial;
color: white;
}
.banner-content{
position:absolute;
top:0;
width: 100%;
text-align: center;
}
}<!DOCTYPE html>
<html>
<head>
<title>Second Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="pageTwo.css">
</head>
<body>
<div class="wrap">
<img src="https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="think" class="tint">
<div class="banner-content">
<p class="week">This Week</p>
<hr id="line">
<p class="enter">Enter</p>
<p class="team">Team Engagement</p>
<p class="percent">67%</p>
</div>
</div>
</body>
</html>关于css - 页面底部巨大的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54918502/