У меня есть этот очень необычный блок пустого пространства в самом низу моего веб-сайта (после тега нижнего колонтитула), если я проверю его элементы, кажется, что пространство не является результатом какого-либо конкретного div, который я создал. Я пробовал играть с прокладкой и т. Д., Кажется, ничего не исчезло.

Я попробовал несколько предложенных исправлений в Интернете, чтобы установить теги HTML и body, чтобы они имели: margin: 0; высота: 100%; Все равно ничего не меняется.

@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
* {
  font-family: 'Sora', sans-serif;
}

html,
body {
  margin: 0;
  height: 100%;
}


/* Header */

.hero {
  display: block;
  box-sizing: border-box;
  height: 500px;
  background-color: #a859f9;
  clip-path: ellipse(75% 100% at 65% 0%);
}

.hero .content .title {
  text-align: center;
  padding: 10%;
  font-size: 250%;
  color: #fff;
}


/* Footer */

.footer-basic {
  padding: 40px 0;
  background-color: #ffffff;
  color: #4b4c4d;
}

.footer-basic ul {
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
}

.footer-basic li {
  padding: 0 10px;
}

.footer-basic ul a {
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
}

.footer-basic ul a:hover {
  opacity: 1;
}

.footer-basic .social {
  text-align: center;
  padding-bottom: 10px;
}

.footer-basic .social>a {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin: 0 8px;
  color: inherit;
  opacity: 0.75;
}

.footer-basic .social>a:hover {
  opacity: 0.9;
}

.footer-basic .copyright {
  margin-top: 15px;
  text-align: center;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 0;
}
    
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../static/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

  <title>Home</title>
</head>

<body>
  <div class="hero">
    <div class="content">
      <div class="title">University of Lincoln <br> Review page
      </div>
    </div>
  </div>

  <div class="footer-basic">
    <footer>
      <div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
      <ul class="list-inline">
        <li class="list-inline-item"><a href="#">Home</a></li>
        <li class="list-inline-item"><a href="#">Services</a></li>
        <li class="list-inline-item"><a href="#">About</a></li>
        <li class="list-inline-item"><a href="#">Terms</a></li>
        <li class="list-inline-item"><a href="#">Privacy Policy</a></li>
      </ul>
      <p class="copyright">Company Name © 2018</p>
    </footer>
  </div>

</body>

</html>
1
mathewsjoyyy 18 Янв 2022 в 22:52

3 ответа

Кажется, вас смущает тот факт, что окно браузера выше содержимого тела.

Если вы измените размер окна так, чтобы его высота была меньше общей высоты содержимого, и прокрутите вниз, пробела не будет. Этот эффект можно увидеть в скрипке, которую вы прислали. Просто запустите его и прокрутите вниз.

enter image description here

0
Jackson Kerr 18 Янв 2022 в 23:17

Кажется, вы установили высоту тела в своем CSS на 100%, что просто означает, что он будет расширяться до этого процента своего родительского элемента. Поскольку у тела нет родителя, у него нет заданной высоты для расширения.

Вам нужно установить свою высоту в div.hero, чтобы покрыть всю высоту браузера, если вы хотите опустить нижний колонтитул ниже. Вы также можете изучить использование box-sizing, чтобы учесть высоту вашего нижнего колонтитула для отображения родительских и дочерних элементов, которые соответствуют размеру, который вы пытаетесь отобразить на своей странице, например, высоте окна просмотра браузера или любому другому заданному пикселю. высота, которую вы пытаетесь достичь.

0
AwakenMyMasters69 18 Янв 2022 в 23:35

Просто установите отступ нижнего колонтитула на 0px.

@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
* {
  font-family: 'Sora', sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/* Header */

.hero {
  display: block;
  box-sizing: border-box;
  height: 500px;
  background-color: #a859f9;
  clip-path: ellipse(75% 100% at 65% 0%);
}

.hero .content .title {
  text-align: center;
  padding: 10%;
  font-size: 250%;
  color: #fff;
}


/* Footer */

.footer-basic {
  background-color: #ffffff;
  color: #4b4c4d;
}

.footer-basic ul {
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
}

.footer-basic li {
  padding: 0 10px;
}

.footer-basic ul a {
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
}

.footer-basic ul a:hover {
  opacity: 1;
}

.footer-basic .social {
  text-align: center;
  padding-bottom: 10px;
}

.footer-basic .social>a {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin: 0 8px;
  color: inherit;
  opacity: 0.75;
}

.footer-basic .social>a:hover {
  opacity: 0.9;
}

.footer-basic .copyright {
  margin-top: 15px;
  text-align: center;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../static/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

  <title>Home</title>
</head>

<body>
  <div class="hero">
    <div class="content">
      <div class="title">University of Lincoln <br> Review page
      </div>
    </div>
  </div>

  <div class="footer-basic">
    <footer>
      <div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
      <ul class="list-inline">
        <li class="list-inline-item"><a href="#">Home</a></li>
        <li class="list-inline-item"><a href="#">Services</a></li>
        <li class="list-inline-item"><a href="#">About</a></li>
        <li class="list-inline-item"><a href="#">Terms</a></li>
        <li class="list-inline-item"><a href="#">Privacy Policy</a></li>
      </ul>
      <p class="copyright">Company Name © 2018</p>
    </footer>
  </div>

</body>

</html>
0
Ali Mustafa 19 Янв 2022 в 01:02
Внизу по-прежнему остается огромный зазор, если сделать его полноэкранным.
 – 
mathewsjoyyy
19 Янв 2022 в 00:58
Перезапустите фрагмент сейчас и проверьте;
 – 
Ali Mustafa
19 Янв 2022 в 01:03