如何去除页面底部的空白区域？

时间：2020-12-28 18:28:38

标签： html css

我正在尝试从我的网站底部删除一些空白。 我试图将 .product 溢出调整为隐藏，但没有奏效。

image of the whitespace im trying to remove

这是我的代码： https://jsfiddle.net/w7zemk0d/

任何帮助将不胜感激:)

2 个答案:

答案 0 :(得分：0)

问题是最后一个 div 的大小是使用元素的高度来调整的，并假设三张计划卡位于彼此下方，因为“价格”div 占据了太多的垂直空间。

如果去掉绝对定位，为div切换到flex布局，底部就没有间隙了：

body {
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
    font-family: quicksand;
    font-size: 25px;
    position: relative;
    left: 105px;
    top: -80px;
    color: white;
}
#header-div {
    width: 2000px;
    height: 75px;
    box-shadow: 5px 5px 8px rgb(128, 128, 128);
    background-color: rgb(255, 202, 103);
    position: relative;
    top: -10px;
    left: -10px;
}
#header-img {
    position: relative;
    top: -12px;
    left: 5px;
}
#email {
    overflow-x: auto !important;
    overflow-y: auto !important;
    margin: 20px;
    width: 500px;
    height: 32px;
    border: 1px solid black;
    border-radius: 5px;
    font-family: quicksand;
    font-size: 20px;
}
#email-div {
    margin: 20px;
    text-align: center;
}
#email-label {
    font-family: quicksand;
    font-size: 20px;
}
#g-btn {
    width: 150px;
    height: 30px;
    background-color: rgb(255, 194, 81);
    font-family: quicksand;
    font-size: 18px;
    border: none;
    border-radius: 5px;
}
#g-btn:hover {
    animation-name: button-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes button-animation {
    100% {
        background-color: rgb(255, 216, 143);
    }
}
#nav-links {
    position: relative;
    left: 1050px;
    top: -123px;
    display: flex;
    flex-direction: column;
}
#nav-links li {
    display: inline;
    font-family: quicksand;
    font-size: 20px;
}
#nav-links a {
    color: white;
    text-decoration: none;
    word-spacing: 5px;
}
#features {
    text-align: center;
}
.features-text {
    font-family: quicksand;
    font-size: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    left: 60px;
    top: -35px;
}
#padlock {
    position: relative;
    top: 35px;
    left: -400px;
}
#padlock-text {
    top: -90px;
}
#p-header {
    position: relative;
    top: -60px;
    left: -235px;
}
#location {
    position: relative; 
    left: -400px;
    top: -10px;
}
#location-text {
    position: relative;
    top: -145px;
    left: 80px;
}
#l-header {
    position: relative;
    top: -120px;
    left: -200px;
}
#mobile {
    position: relative;
    left: -400px;
    top: -65px;
}
#mobile-text {
    position: relative;
    top: -200px;
    left: 160px;
}
#m-header {
    position: relative;
    top: -185px;
    left: -230px;
}
.header-text {
    font-family: quicksand;
    font-size: 30px;
}
#video {
    display: flex;
    justify-content: center;
    position: relative;
    top: -150px;
}
/* Start Of Danger Zone */
.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    border-radius: 5px;
    width: 350px;
    font-family: quicksand;
    margin: 10px;
    background-color: white;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}
.product li {
    list-style: none;
}
.product > .level {
    background-color: #ddd;
    color: black;
    padding: 15px 0;
    width: 100%;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bolder;
}
.button {
    width: 100px;
    height: 30px;
    background-color: rgb(252, 189, 17);
    border: none;
    border-radius: 5px;
    margin: 10px;
    font-family: quicksand;
    color: white;
    font-size: 20px;
    position: relative;
    top: -15px;
}
.price {
    font-size: 30px;
    margin: 10px;
}
#prices{
    display:flex;
  width: fit-content;
  max-width:100%;
  margin: auto;
}

.perks {
    position: relative;
    top: -15px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FCC: VPN Product Landing Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
    <div id="main">
        <div id="header-div">
            <nav id="nav-bar">
            <img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
            <div id="header">Prive9000 VPN Service</div>
            <div id="nav-links">
                <ul>
                    <li><a href="#features"> Features <span class="middot"> &middot;</span> </a></li>
                    <li><a href="#prices"> Pricing <span class="middot"> &middot;</span> </a></li>
                    <li><a href="#app"> Mobile App </a></li>
                </ul>
            </div>
            </nav>
        </div>
        <div id="email-div">
            <form action="https://www.freecodecamp.org/email-submit)." id="email-form">
                <label for="email" id="email-label"> Please Enter Your Email: <br>
                    <input id="email" type="email" placeholder=" Enter Your Email" required> <br>
                </label>
                <button type="submit" id="g-btn">GET STARTED</button>
            </form>
        </div>
        <div id="features">
            <img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
            <h2 class="header-text" id="p-header">Privacy Ensured</h2>
            <p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
            <img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
            <h2 class="header-text" id="l-header">Change Your Location</h2>
            <p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
            <img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
            <h2 class="header-text" id="m-header">For All Platforms</h2>
            <p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
        </div>
        <div id="video">
            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <!--Start Of Danger Zone-->
        <div id="prices">
            <div class="product" id="free">
                <div class="level">Free Plan</div>
                <div class="price">Free</div>
                <ul class="perks">
                    <li>No Payments; 100% Free</li>
                    <li>Connect To Over 20+ Countries</li>
                    <li>Ads Included</li>
                    <li>Doesn't Allow Country Swap</li>
                </ul>
                <button class="button">Select</button>
            </div>
            <div class="product" id="paid-monthly">
                <div class="level">Monthly Paid Plan</div>
                <div class="price">$100</div>
                <ul class="perks">
                    <li>$100 per Month</li>
                    <li>Connect To Over 100+ Countries</li>
                    <li>Ads Included</li>
                    <li>Allows Country Swap For Netflix Only</li>
                </ul>
                <button class="button">Select</button>
            </div>
            <div class="product" id="yearly-paid">
                <div class="level">Yearly Paid Plan</div>
                <div class="price">$800</div>
                <ul class="perks">
                    <li>$800 per Year</li>
                    <li>Connect To ALL Countries</li>
                    <li>Ad Free</li>
                    <li>Allows Country Swap For All Platfroms</li>
                </ul>
                <button class="button">Select</button>
            </div>
            </div>
        </div>
        <!--End Of Danger Zone-->
    </div>
</body>
</html>

答案 1 :(得分：0)

你的问题不是你使用绝对定位，而是因为你没有使用绝对定位。在 #paid-monthly 和 #paid-yearly 上将相对更改为绝对，您应该已经准备就绪。您还需要按照指示为它们更改 top:。这将保留您交错的卡片。

body {
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
    
    background-size:cover;
}
#header {
    font-family: quicksand;
    font-size: 25px;
    position: relative;
    left: 105px;
    top: -80px;
    color: white;
}
#header-div {
    width: 2000px;
    height: 75px;
    box-shadow: 5px 5px 8px rgb(128, 128, 128);
    background-color: rgb(255, 202, 103);
    position: relative;
    top: -10px;
    left: -10px;
}
#header-img {
    position: relative;
    top: -12px;
    left: 5px;
}
#email {
    overflow-x: auto !important;
    overflow-y: auto !important;
    margin: 20px;
    width: 500px;
    height: 32px;
    border: 1px solid black;
    border-radius: 5px;
    font-family: quicksand;
    font-size: 20px;
}
#email-div {
    margin: 20px;
    text-align: center;
}
#email-label {
    font-family: quicksand;
    font-size: 20px;
}
#g-btn {
    width: 150px;
    height: 30px;
    background-color: rgb(255, 194, 81);
    font-family: quicksand;
    font-size: 18px;
    border: none;
    border-radius: 5px;
}
#g-btn:hover {
    animation-name: button-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes button-animation {
    100% {
        background-color: rgb(255, 216, 143);
    }
}
#nav-links {
    position: relative;
    left: 1050px;
    top: -123px;
    display: flex;
    flex-direction: column;
}
#nav-links li {
    display: inline;
    font-family: quicksand;
    font-size: 20px;
}
#nav-links a {
    color: white;
    text-decoration: none;
    word-spacing: 5px;
}
#features {
    text-align: center;
}
.features-text {
    font-family: quicksand;
    font-size: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    left: 60px;
    top: -35px;
}
#padlock {
    position: relative;
    top: 35px;
    left: -400px;
}
#padlock-text {
    top: -90px;
}
#p-header {
    position: relative;
    top: -60px;
    left: -235px;
}
#location {
    position: relative; 
    left: -400px;
    top: -10px;
}
#location-text {
    position: relative;
    top: -145px;
    left: 80px;
}
#l-header {
    position: relative;
    top: -120px;
    left: -200px;
}
#mobile {
    position: relative;
    left: -400px;
    top: -65px;
}
#mobile-text {
    position: relative;
    top: -200px;
    left: 160px;
}
#m-header {
    position: relative;
    top: -185px;
    left: -230px;
}
.header-text {
    font-family: quicksand;
    font-size: 30px;
}
#video {
    display: flex;
    justify-content: center;
    position: relative;
    top: -150px;
}
/* Start Of Danger Zone */
.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    border-radius: 5px;
    width: 350px;
    font-family: quicksand;
    margin: 10px;
    background-color: white;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}
.product li {
    list-style: none;
}
.product > .level {
    background-color: #ddd;
    color: black;
    padding: 15px 0;
    width: 100%;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bolder;
}
.button {
    width: 100px;
    height: 30px;
    background-color: rgb(252, 189, 17);
    border: none;
    border-radius: 5px;
    margin: 10px;
    font-family: quicksand;
    color: white;
    font-size: 20px;
    position: relative;
    top: -15px;
}
.price {
    font-size: 30px;
    margin: 10px;
}
.perks {
    position: relative;
    top: -15px;
}
#paid-monthly {
    position: relative;
    left: 380px;
    top: -282px;
}
#yearly-paid {
    position: relative;
    left: 759px;
    top: -565px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FCC: VPN Product Landing Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
    <div id="main">
        <div id="header-div">
            <nav id="nav-bar">
            <img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
            <div id="header">Prive9000 VPN Service</div>
            <div id="nav-links">
                <ul>
                    <li><a href="#features"> Features <span class="middot"> &middot;</span> </a></li>
                    <li><a href="#prices"> Pricing <span class="middot"> &middot;</span> </a></li>
                    <li><a href="#app"> Mobile App </a></li>
                </ul>
            </div>
            </nav>
        </div>
        <div id="email-div">
            <form action="https://www.freecodecamp.org/email-submit)." id="email-form">
                <label for="email" id="email-label"> Please Enter Your Email: <br>
                    <input id="email" type="email" placeholder=" Enter Your Email" required> <br>
                </label>
                <button type="submit" id="g-btn">GET STARTED</button>
            </form>
        </div>
        <div id="features">
            <img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
            <h2 class="header-text" id="p-header">Privacy Ensured</h2>
            <p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
            <img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
            <h2 class="header-text" id="l-header">Change Your Location</h2>
            <p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
            <img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
            <h2 class="header-text" id="m-header">For All Platforms</h2>
            <p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
        </div>
        <div id="video">
            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <!--Start Of Danger Zone-->
        <div id="prices">
            <div class="product" id="free">
                <div class="level">Free Plan</div>
                <div class="price">Free</div>
                <ul class="perks">
                    <li>No Payments; 100% Free</li>
                    <li>Connect To Over 20+ Countries</li>
                    <li>Ads Included</li>
                    <li>Doesn't Allow Country Swap</li>
                </ul>
                <button class="button">Select</button>
            </div>
            <div class="product" id="paid-monthly">
                <div class="level">Monthly Paid Plan</div>
                <div class="price">$100</div>
                <ul class="perks">
                    <li>$100 per Month</li>
                    <li>Connect To Over 100+ Countries</li>
                    <li>Ads Included</li>
                    <li>Allows Country Swap For Netflix Only</li>
                </ul>
                <button class="button">Select</button>
            </div>
            <div class="product" id="yearly-paid">
                <div class="level">Yearly Paid Plan</div>
                <div class="price">$800</div>
                <ul class="perks">
                    <li>$800 per Year</li>
                    <li>Connect To ALL Countries</li>
                    <li>Ad Free</li>
                    <li>Allows Country Swap For All Platfroms</li>
                </ul>
                <button class="button">Select</button>
            </div>
            </div>
        </div>
        <!--End Of Danger Zone-->
    
</body>
</html>

body {
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
    font-family: quicksand;
    font-size: 25px;
    position: relative;
    left: 105px;
    top: -80px;
    color: white;
}
#header-div {
    width: 2000px;
    height: 75px;
    box-shadow: 5px 5px 8px rgb(128, 128, 128);
    background-color: rgb(255, 202, 103);
    position: relative;
    top: -10px;
    left: -10px;
}
#header-img {
    position: relative;
    top: -12px;
    left: 5px;
}
#email {
    overflow-x: auto !important;
    overflow-y: auto !important;
    margin: 20px;
    width: 500px;
    height: 32px;
    border: 1px solid black;
    border-radius: 5px;
    font-family: quicksand;
    font-size: 20px;
}
#email-div {
    margin: 20px;
    text-align: center;
}
#email-label {
    font-family: quicksand;
    font-size: 20px;
}
#g-btn {
    width: 150px;
    height: 30px;
    background-color: rgb(255, 194, 81);
    font-family: quicksand;
    font-size: 18px;
    border: none;
    border-radius: 5px;
}
#g-btn:hover {
    animation-name: button-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes button-animation {
    100% {
        background-color: rgb(255, 216, 143);
    }
}
#nav-links {
    position: relative;
    left: 1050px;
    top: -123px;
    display: flex;
    flex-direction: column;
}
#nav-links li {
    display: inline;
    font-family: quicksand;
    font-size: 20px;
}
#nav-links a {
    color: white;
    text-decoration: none;
    word-spacing: 5px;
}
#features {
    text-align: center;
}
.features-text {
    font-family: quicksand;
    font-size: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    left: 60px;
    top: -35px;
}
#padlock {
    position: relative;
    top: 35px;
    left: -400px;
}
#padlock-text {
    top: -90px;
}
#p-header {
    position: relative;
    top: -60px;
    left: -235px;
}
#location {
    position: relative; 
    left: -400px;
    top: -10px;
}
#location-text {
    position: relative;
    top: -145px;
    left: 80px;
}
#l-header {
    position: relative;
    top: -120px;
    left: -200px;
}
#mobile {
    position: relative;
    left: -400px;
    top: -65px;
}
#mobile-text {
    position: relative;
    top: -200px;
    left: 160px;
}
#m-header {
    position: relative;
    top: -185px;
    left: -230px;
}
.header-text {
    font-family: quicksand;
    font-size: 30px;
}
#video {
    display: flex;
    justify-content: center;
    position: relative;
    top: -150px;
}
/* Start Of Danger Zone */
.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    border-radius: 5px;
    width: 350px;
    font-family: quicksand;
    margin: 10px;
    background-color: white;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}
.product li {
    list-style: none;
}
.product > .level {
    background-color: #ddd;
    color: black;
    padding: 15px 0;
    width: 100%;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bolder;
}
.button {
    width: 100px;
    height: 30px;
    background-color: rgb(252, 189, 17);
    border: none;
    border-radius: 5px;
    margin: 10px;
    font-family: quicksand;
    color: white;
    font-size: 20px;
    position: relative;
    top: -15px;
}
.price {
    font-size: 30px;
    margin: 10px;
}
.perks {
    position: relative;
    top: -15px;
}
#paid-monthly {
    position: absolute;
    left: 380px;
    top: 1285px;
}
#yearly-paid {
    position: absolute;
    left: 759px;
    top: 1400px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FCC: VPN Product Landing Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
    <div id="main">
        <div id="header-div">
            <nav id="nav-bar">
            <img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
            <div id="header">Prive9000 VPN Service</div>
            <div id="nav-links">
                <ul>
                    <li><a href="#features"> Features <span class="middot"> &middot;</span> </a></li>
                    <li><a href="#prices"> Pricing <span class="middot"> &middot;</span> </a></li>
                    <li><a href="#app"> Mobile App </a></li>
                </ul>
            </div>
            </nav>
        </div>
        <div id="email-div">
            <form action="https://www.freecodecamp.org/email-submit)." id="email-form">
                <label for="email" id="email-label"> Please Enter Your Email: <br>
                    <input id="email" type="email" placeholder=" Enter Your Email" required> <br>
                </label>
                <button type="submit" id="g-btn">GET STARTED</button>
            </form>
        </div>
        <div id="features">
            <img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
            <h2 class="header-text" id="p-header">Privacy Ensured</h2>
            <p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
            <img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
            <h2 class="header-text" id="l-header">Change Your Location</h2>
            <p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
            <img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
            <h2 class="header-text" id="m-header">For All Platforms</h2>
            <p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
        </div>
        <div id="video">
            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <!--Start Of Danger Zone-->
        <div id="prices">
            <div class="product" id="free">
                <div class="level">Free Plan</div>
                <div class="price">Free</div>
                <ul class="perks">
                    <li>No Payments; 100% Free</li>
                    <li>Connect To Over 20+ Countries</li>
                    <li>Ads Included</li>
                    <li>Doesn't Allow Country Swap</li>
                </ul>
                <button class="button">Select</button>
            </div>
            <div class="product" id="paid-monthly">
                <div class="level">Monthly Paid Plan</div>
                <div class="price">$100</div>
                <ul class="perks">
                    <li>$100 per Month</li>
                    <li>Connect To Over 100+ Countries</li>
                    <li>Ads Included</li>
                    <li>Allows Country Swap For Netflix Only</li>
                </ul>
                <button class="button">Select</button>
            </div>
            <div class="product" id="yearly-paid">
                <div class="level">Yearly Paid Plan</div>
                <div class="price">$800</div>
                <ul class="perks">
                    <li>$800 per Year</li>
                    <li>Connect To ALL Countries</li>
                    <li>Ad Free</li>
                    <li>Allows Country Swap For All Platfroms</li>
                </ul>
                <button class="button">Select</button>
            </div>
            </div>
        </div>
        <!--End Of Danger Zone-->
    
</body>
</html>

相关问题
最新问题