HTML 頁面底部的空白
[英]Whitespace at the bottom of HTML page
問題描述
在為大學課程創建第一個網頁的過程中，遇到了一個非常奇怪的問題。 我一直在注釋代碼，試圖找出問題所在，但我不知道出了什么問題。
我使用了*{ border: 1px solid red; } *{ border: 1px solid red; }看到所有的CSS元素，以及所有我看到的關聯是一條紅線，概述了整個頁面。
有什么幫助嗎？ 這是我的 CSS。
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color:white;
text-align:center;
font-size:55px;
}
.gradPic{
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color:black;
top:0;
left:0;
height:150px;
width:1875px;
position:static;
border:5px outset white;
border-style:groove;
}
.bio {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
}
.movies {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:492px;
bottom:625px;
}
.books {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:984px;
bottom:1250px;
}
.sites {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:1476px;
bottom:1875px;
}
body {
background-image: url("gradient.jpg");
color:white
}
和 HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="StylesheetAssign2.css" type="text/css">
<title>Sujal's IT 130 Assignment 2 Page</title>
</head>
<body>
<div class="titleBox"><h1>Sujal Dantluri</h1> <!-- box at the top of the page !-->
</div>
<div class="bio"><h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !-->
<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic"> <!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies"><h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books"><h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites"><h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2></div>
</body>
</html>
2 個解決方案
解決方案1
0 2020-10-02 01:14:20
您的代碼遠不能用於真正的網站（即不響應），但是如果您真的想將這樣的寬度固定到頁面上，您應該將width設置從 header 移到body ，使用display: inline-block; 和vertical-align: top; 在所有應該彼此相鄰的盒子上，並擦除position: relative及其所有top 、 bottom 、 left and right` 設置。 這樣底部的空白也將成為歷史......
您可以通過在它們上使用margin-left在框之間創建空間，但有更好的解決方案，例如使用（全寬）容器並應用display: flex和justify-content: space-between 。
h1 { font-family: "Trebuchet MS", Helvetica, sans-serif; color: white; text-align: center; font-size: 55px; } .gradPic { display: block; margin-left: auto; margin-right: auto; } .titleBox { background-color: black; height: 150px; position: static; border: 5px outset white; border-style: groove; } .bio { height: 600px; width: 400px; font-size: 105%; font-family: "Trebuchet MS", Helvetica, sans-serif; background-color: black; border: 5px outset white; border-style: groove; margin: 15px 0px 0px 0px; display: inline-block; vertical-align: top; } .movies { height: 600px; width: 400px; font-size: 105%; font-family: "Trebuchet MS", Helvetica, sans-serif; background-color: black; border: 5px outset white; border-style: groove; margin: 15px 0px 0px 0px; display: inline-block; vertical-align: top; } .books { height: 600px; width: 400px; font-size: 105%; font-family: "Trebuchet MS", Helvetica, sans-serif; background-color: black; border: 5px outset white; border-style: groove; margin: 15px 0px 0px 0px; display: inline-block; vertical-align: top; } .sites { height: 600px; width: 400px; font-size: 105%; font-family: "Trebuchet MS", Helvetica, sans-serif; background-color: black; border: 5px outset white; border-style: groove; margin: 15px 0px 0px 0px; display: inline-block; vertical-align: top; } body { background-image: url("gradient.jpg"); color: white; width: 1875px; }
<div class="titleBox"> <h1>Sujal Dantluri</h1> <!-- box at the top of the page !--> </div> <div class="bio"> <h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !--> <img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic"> <!-- creates a class for the image so it can be centered !--> <ul> <li>18 years old</li><br> <li>Majoring in Computer Science</li><br> <li>Interested in Technology, Animals, and Cybersecurity</li><br> <li>Hobbies include an unhealthy amount of gaming and napping</li><br> <li>From Illinois</li><br> <li>Fun Fact: I have a twin sister.</li><br> </ul> </div> <div class="movies"> <h2 style=color:white;text-align:center>Favorite Movies</h2> </div> <div class="books"> <h2 style=color:white;text-align:center>Favorite Books</h2> </div> <div class="sites"> <h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2> </div>
解決方案2
0 已采納 2020-10-02 01:25:17
h1 { font-family: "Trebuchet MS", Helvetica, sans-serif; color:white; text-align:center; font-size:55px; } .gradPic{ display: block; margin-left: auto; margin-right: auto; } .titleBox { background-color:black; top:0; left:0; height:150px; width:100%; border:5px outset white; border-style:groove; } .totaldiv{display:flex;width:100%;} .bio { display: inline-block; height:600px; width:25%; font-size:15px; font-family: "Trebuchet MS", Helvetica, sans-serif; background-color:black; border:5px outset white; border-style:groove; margin: 15px 0px 0px 0px; } .bio h2{margin: 0 0 10px;} .movies { display: inline-block; height:600px; width:25%; font-size:15px; font-family: "Trebuchet MS", Helvetica, sans-serif; background-color:black; border:5px outset white; border-style:groove; margin: 15px 0px 0px 0px; left:492px; bottom:625px; } .books { display: inline-block; height:600px; width:25%; font-size:15px; font-family: "Trebuchet MS", Helvetica, sans-serif; background-color:black; border:5px outset white; border-style:groove; margin: 15px 0px 0px 0px; left:984px; bottom:1250px; } .sites { display: inline-block; height:600px; width:25%; font-size:15px; font-family: "Trebuchet MS", Helvetica, sans-serif; background-color:black; border:5px outset white; border-style:groove; margin: 15px 0px 0px 0px; left:1476px; bottom:1875px; } body { background-image: url("gradient.jpg"); color:white }
<div class="titleBox"><h1>Sujal Dantluri</h1> <!-- box at the top of the page !--> </div> <div class="totaldiv"> <div class="bio"><h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !--> <!--<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic">--> <!-- creates a class for the image so it can be centered !--> <ul> <li>18 years old</li><br> <li>Majoring in Computer Science</li><br> <li>Interested in Technology, Animals, and Cybersecurity</li><br> <li>Hobbies include an unhealthy amount of gaming and napping</li><br> <li>From Illinois</li><br> <li>Fun Fact: I have a twin sister.</li><br> </ul> </div> <div class="movies"><h2 style=color:white;text-align:center>Favorite Movies</h2> </div> <div class="books"><h2 style=color:white;text-align:center>Favorite Books</h2> </div> <div class="sites"><h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2></div> </div>
在 HTML 頁面底部添加空格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.