我的页面底部有很多空白。我不明白是哪个 div 导致了这个问题。有人可以指出我的错误吗。
我花了几个小时试图解决这个问题并看到类似的帖子，但似乎没有任何效果。请有人解决这个问题，因为现在是凌晨 4 点，我没有任何体力了。谢谢
.blackup{
position: relative;
width: 100%;
height: 20px;
background: #000000;
}
.down
{
height: 20px;
width: 100%;
position: relative;
background-color: transparent;
}
.down:after
{/* z-index: 1; */
bottom: 0;
background: black;
content: '';
height: 25px;
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.purple
{
height: 20px;
width: 100%;
position: relative;
background-color: transparent;
}
.purple:after
{/* z-index: 1; */
margin-top: 4px;
bottom: 0;
background: #513a82;
content: '';
height: 25px;
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.down2
{
height: 20px;
width: 100%;
position: relative;
background-color: transparent;
}
.down2:after
{/* z-index: 1; */
margin-top: 8px;
bottom: 0;
background: black;
content: '';
height: 25px;
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.white
{
height: 20px;
width: 100%;
position: relative;
background-color: transparent;
}
.white:after
{/* z-index: 1; */
margin-top: 8px;
bottom: 0;
background: white;
content: '';
height: 392px;
left: 0;
position: absolute;
right: 0;top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.grad1
{
margin-left: 26px;
margin-bottom: 431px;
margin-top: -754px;
background:-webkit-linear-gradient(#6b5773, #799DB7);
width: 1128px;
height: 1400px;
position: relative;
clip-path: polygon(12% 0%,35% 0%,35% 37.8%, 12% 44.2%);
opacity: 0.8;
}
.text1
{
font-family: sans-serif;
position: relative;
margin-top: -1807px;
font-size: 71;
color: white;
margin-left: 177px;
letter-spacing: -1px;
transform: scaleY(1.5);
}
.text2
{
font-family: sans-serif;
position: relative;
margin-top: 25px;
font-size: 71;
color: white;
margin-left: 177px;
letter-spacing: -1px;
transform: scaleY(2.1);
}
.text3
{
font-family: sans-serif;
position: relative;
margin-top: 48px;
font-size: 50px;
color: white;
margin-left: 177px;
letter-spacing: -1px;
transform: scaleY(2.5);
}
.wb
{
margin-left: 178px;
margin-bottom: 41px;
margin-top: 35px;
background: white;
width: 142px;
height: 132px;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 4%, 0 4%);
}
.p1
{
font-family: monospace;
position: relative;
margin-top: -147px;
font-size: 22px;
color: white;
margin-left: 177px;
letter-spacing: -1px;
}
.grad2
{
margin-top: -456px;
margin-left: 1134px;
height: 127px;
width: 199px;
position: relative;
background:#31302e;
opacity:0.8;
}
.grad2:after
{
bottom: 0;
background: inherit;
content: '';
height: 285px;left: 0;
position: absolute;right: 0;
top: 0;transform-origin: top right;
transform: skewY(-18deg);
width: 100%;
}
.text4
{
text-decoration: none;
cursor:pointer;
position: relative;
margin-top: -104px;
margin-left: 1146px;
color: white;
transform: scaleY(2.1);
}
.text4 a
{
text-decoration: none;
cursor: pointer;
font-family: sans-serif;
position: relative;
font-size: 26px;
color: white;
letter-spacing: -1px;
transform: scaleY(2.1);
}
.text5
{
text-decoration: none;
cursor:pointer;
position: relative;
margin-top: 24px;
margin-left: 1146px;
color: #318ECB;
transform: scaleY(2.2);
}
.text5 a
{
text-decoration: none;
cursor:pointer;
font-family: sans-serif;
position: relative;
font-size: 37px;
color: #318ECB;
letter-spacing: 4px;
transform: scaleY(2.2);
}
.p2
{
font-family: monospace;
position: relative;
margin-top: 18px;
font-size: 18px;
color: white;
margin-left: 1146px;
letter-spacing: -1px;
}
.box1
{
bottom: -519px;
margin-left: 154px;
width: 280px;
position: relative;
background-color: transparent;
}
.box1:after
{
z-index: 1;
bottom: 0px;
background: #553e86;
content: '';
height: 434px;
left: 0;
position: absolute;
right: 0px;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.box2
{
bottom: -399px;
margin-left: 533px;
width: 280px;
position: relative;
background-color: transparent;
}
.box2:after
{
bottom: 0px;
background: -webkit-linear-gradient(#472965, #3789c1);
content: '';
height: 434px;
left: 0;
position: absolute;
right: 0px;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.box3
{
bottom: -279px;
margin-left: 903px;
width: 280px;
position: relative;
background-color: transparent;
}
.box3:after
{
z-index: 1;
bottom: 0px;
background: #553e86;
content: '';
height: 434px;
left: 0;
position: absolute;
right: 0px;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.t1
{
z-index: 2;
text-decoration: none;
cursor:pointer;
position: relative;
margin-top: 634px;
margin-left: 177px;
color: white;
transform: scaleY(1.5);
}
.t1 a
{
z-index: 2;
text-decoration: none;
cursor:pointer;
font-family: sans-serif;
position: relative;
font-size: 24px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.5);
font-weight: bold
}
#d1
{
z-index: 2;
font-family: sans-serif;
position: relative;
margin-top: 7px;
margin-left: 177px;
font-size: 15px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.4);
}
#p1
{
z-index: 2;
font-family: sans-serif;
position: relative;
margin-top: 35px;
margin-left: 177px;
font-size: 11px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.4);
line-height:1.3;
}
.t2
{
z-index: 2;
text-decoration: none;
cursor:pointer;
position: relative;
margin-top: -313px;
margin-left: 603px;
font-size: 24px;
color: white;
transform: scaleY(1.5);
}
.t2 a
{
z-index: 2;
text-decoration: none;
cursor:pointer;
font-family: sans-serif;
position: relative;
font-size: 24px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.5);
font-weight: bold
}
#d2
{
font-family: sans-serif;
position: relative;
margin-top: 7px;
margin-left: 608px;
font-size: 15px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.4);
}
#p2
{
font-family: sans-serif;
position: relative;
margin-top: 35px;
margin-left: 563px;
font-size: 11px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.4);
line-height:1.3;
}
.t3
{
z-index: 2;
text-decoration: none;
cursor:pointer;
position: relative;
margin-top: -321px;
margin-left: 931px;
color: white;
transform: scaleY(1.5);
}
.t3 a
{
z-index: 2;
text-decoration: none;
cursor:pointer;
font-family: sans-serif;
position: relative;
font-size: 24px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.5);
font-weight: bold;
}
#d3
{
z-index: 2;
font-family: sans-serif;
position: relative;
margin-top: 7px;
margin-left: 931px;
font-size: 15px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.4);
}
#p3
{
z-index: 2;
font-family: sans-serif;
position: relative;
margin-top: 39px;
margin-left: 931px;
font-size: 11px;
color: white;
letter-spacing: 1px;
transform: scaleY(1.4);
line-height: 1.3;
}
.b1
{
bottom: -258px;
margin-left: 176px;
width: 231px;
position: relative;
background-color: transparent;
}
.b1:after
{
z-index: -1;
bottom: 0px;
background: black;
content: '';
height: 116px;
left: 0;
position: absolute;
right: 0px;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.b2
{
bottom: -139px;
margin-left: 557px;
width: 231px;
position: relative;
background-color: transparent;
}
.b2:after
{
z-index: -1;
bottom: 0px;
background: black;
content: '';
height: 116px;
left: 0;
position: absolute;
right: 0px;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.b3
{
bottom: -45px;
margin-left: 878px;
height: 20px;
width: 231px;
position: relative;
background-color: transparent;
}
.b3:after
{
margin: auto;
bottom: 0px;
background: black;
content: '';
height: 194px;
left: 0;
position: absolute;
right: 0px;
top: 0;
transform-origin: top left;
transform: skewY(-19deg);
width: 100%;
}
.blackborder{
z-index: 3;
margin-top: 301px;
position: relative;
width: 100%;
height: 175px;
background: #000000;
}
/*.modern
{
font-family: sans-serif;
position: relative;
margin-top: 360px;
margin-left: 931px;
font-size: 24px;
color: black;
letter-spacing: 1px;
transform: scaleY(1.5);
font-weight: bold;
}*/<div class="blackup"></div>
<div class="flyer"><img src="E:\Software House\Flyer\a.jpg" width="100%"></div>
<div class="down"></div>
<div class="purple"></div>
<div class="down2"></div>
<div class="white"></div>
<div class="grad1"></div>
<div class="text1">THE</div>
<div class="text2"><b>FLYER</b></div>
<div class="text3">BRAND</div>
<div class="wb"></div>
<div class="p1">Dolor sit amet<br>consectetuer a<br>depising elit.</div>
<div class="grad2"></div>
<div class="text4"><a href="#">LOREM</a></div>
<div class="text5">
<a href="#">IPSUM</a>
</div>
<div class="p2">Dolor sit amet<br>
consectetuer a<br>
depising elit.
</div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="t1">
<a href="#">CORPORATE</a>
</div>
<div id="d1">DESIGN</div>
<div id="p1">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry. Lorem<br>Ipsum has been the industry's standard<br>dummy text ever since the 1500s, when<br>an unknown printer took a galley of type<br>and scrambled it to make a type specimen<br>book. It has survived not only five , but<br>also the leap into electronic typesetting.</div>
<div class="t2">
<a href="#">SUPPORT</a>
</div>
<div id="d2">DESIGN</div>
<div id="p2">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry. Lorem<br>Ipsum has been the industry's standard<br>dummy text ever since the 1500s<br>when an unknown printer took a galley<br>of type and scrambled it to make a type<br>specimen book.</div>
<div class="t3">
<a href="#">MANAGEMENT</a>
</div>
<div id="d3">DESIGN</div>
<div id="p3">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry. Lorem<br>Ipsum has been the industry's standard<br>dummy text ever since the 1500s, when <br>an unknown printer took a galley of type<br>and scrambled it to make a type specimen<br>book. It has survived not only five , but<br>also the leap into electronic.</div>
<!-- <div class="modern">MODERN</div> -->
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="blackborder"></div>最佳答案
好吧，您的 grad1 类 div 实际上有一个超过 400 像素的 margin-bottom。解决这个问题将是一个好的开始。
关于html - 网页下方有很多空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59148058/