Блог

Главная - Вопросы по программированию - Пробелы внизу HTML-страницы

Пробелы внизу HTML-страницы

#html #css

#HTML #css

Вопрос:

В середине создания одной из моих первых веб-страниц для курса колледжа и столкнулся с действительно странной проблемой. Я комментировал код, пытаясь найти, в чем проблема, но я понятия не имею, что не так.

Раньше я *{ 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>

Комментарии:

1. Вы говорите о пробелах вокруг тела?

2. Вы позиционируете объекты относительно (которые выровнены по вертикали), поэтому он все еще отображается в обычном потоке, но затем перемещает их.

3. @possum как это создает пробелы? и это код позиционирования, специально вызывающий это?

4. @GamersAgenda Нет, когда я загружаю веб-страницу, внизу всего остального остается огромное количество пустого пространства.

5. Он создает пробелы, потому что он отображает все по вертикали, а затем перемещает их, оставляя пробелы. Вам нужно использовать что-то другое, чем относительное позиционирование, если вы хотите, чтобы оно исчезло

Ответ №1:

 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>

Ответ №2:

Ваш код далек от пригодности для использования на реальном веб-сайте (т. Е. Не Отвечает на запросы), но если вы действительно хотите зафиксировать такую ширину страницы, вам следует переместить width настройку из заголовка в body , использовать display: inline-block; и vertical-align: top; во всех тех полях, которые должны быть рядом друг с другом, и стереть position: relative и всеих top настройки, bottom , слева and направо. Таким образом, пробел внизу также будет историей…

Вы можете создавать пробелы между блоками, используя margin-left для них, но есть лучшие решения, такие как использование контейнера (во всю ширину) и применение display: flex justify-content: space-between к нему and .

 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>