网页下方有很多空白

Question

I have getting lots of whitespace at the bottom of my page. I don't understand which div is causing this problem. Can someone please point out at my mistake.

I have spend hours trying to solve this problem and seen similar posts, but nothing seems to work out. Kindly someone solve this, as it is 4AM, and I don't have any stamina left. Thanks

 .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>

Answer 1

Well, your div with class grad1 literally has a margin-bottom of over 400px. Fixing this would be a good start.

Answer 2

Your issues seem to come from your margin-top , margin-bottom , and height in the grad1 class as well as the margin-top in the text1 class. Removing those seems to fix the white space at the bottom issue. Also, I would refrain from using negative values as it just makes things messy to bug fix.