3

У меня под футером есть маленькая белая полоса. Мне бы хотелось её убрать. Я пробовал ставить в CSS margin-bottom: 0%; не получалось. Может кто знает. введите сюда описание изображения

body {
  background-color: white;
}

#carousel {
  padding: 0px;
}

#bd {
  font-size: 1.2em;
}

#description1 {
  width: 69%;
  border: 3px dashed grey;
  padding: 4%;
  margin-top: 2%;
  margin-left: 18%;
  margin-bottom: 2%;
}

#h1onthispage {
  margin-bottom: 4%;
}

#h2basicgramamr {
  width: 103%;
  height: 3%;
  margin-bottom: 2%;
}

.color {
  color: red;
}


/* Footer */

footer {
  background-color: #424558;
  color: white;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px;
  text-align: center;
}

footer p {
  padding: 10.5px;
  margin: 0px;
  line-height: 100%;
  margin-bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="learningenglish, learning english, " />
  <title>learningenglish.com</title>
  <link rel="stylesheet" type="text/css" href="homepagefan.css" />
  <link href="img/learningenglish" rel="shortcuticon" type="image/x-icon" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="#" class="navbar-brand">
      <img src="img/english.png" width="80" height="40" alt="logo" title="Home">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent" aria-controls="navbarSupportContent" aria-expend="false" aria-label="ToggleNavigation">
      	<span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarSupportContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a href="#" class="nav-link" id="bd">Present</a>
        </li>
        <li class="nav-item active">
          <a href="#" class="nav-link" id="bd">Past</a>
        </li>
        <li class="nav-item active">
          <a href="#" class="nav-link" id="bd">Can, will</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container-fluid" id="carousel">
    <div id="carouselHome" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li class="active" data-target="carouselHome" data-slide-to="0"></li>
        <li class="active" data-target="carouselHome" data-slide-to="2"></li>
        <li class="active" data-target="carouselHome" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img/city1.jpg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="img/city2.jpg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="img/city3.jpg" alt="" class="d-block w-100">
        </div>
      </div>
      <a href="#carouselHome" class="carousel-control-prev" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a href="#carouselHome" class="carousel-control-next" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

  <div id="description1">
    <h1 id="h1onthispage">On this site you can find:</h1>
    <h2 id="h2basicgramamr"><span class="color">Basic grammar English rules</span> (you can learn the rules that are easy to understand and to learn).</h2>
    <h2><span class="color">Exercises in English</span> (you can do any exercises for Past, Present and Future).</h2>
  </div>

  <footer>
    <p>Privacy policy © 2018 All rights reserved.</p>
  </footer>
</body>

</html>

1
  • id у блоков просто ужасны...
    – DaemonHK
    4 апр 2018 в 6:34

2 ответа 2

3

Уберите фиксированную высоту футера. Либо уменьшите вертикальный padding в параграфе внутри него. Такой результат получается потому, что вы ограничили высоту футера, который имеет темный фон и он равен 35 пикселей, что бы вы далее не делали. Затем в футер ограниченной высоты помещаете контент с прозрачным фоном, который больше него. И этот контент добавляет этот отступ как бы вылезая за футер.

body {
  background-color: white;
}

#carousel {
  padding: 0px;
}

#bd {
  font-size: 1.2em;
}

#description1 {
  width: 69%;
  border: 3px dashed grey;
  padding: 4%;
  margin-top: 2%;
  margin-left: 18%;
  margin-bottom: 2%;
}

#h1onthispage {
  margin-bottom: 4%;
}

#h2basicgramamr {
  width: 103%;
  height: 3%;
  margin-bottom: 2%;
}

.color {
  color: red;
}


/* Footer */

footer {
  background-color: #424558;
  color: white;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  /*height: 35px;*/
  text-align: center;
}

footer p {
  padding: 10.5px;
  margin: 0px;
  line-height: 100%;
  margin-bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="learningenglish, learning english, " />
  <title>learningenglish.com</title>
  <link rel="stylesheet" type="text/css" href="homepagefan.css" />
  <link href="img/learningenglish" rel="shortcuticon" type="image/x-icon" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="#" class="navbar-brand">
      <img src="img/english.png" width="80" height="40" alt="logo" title="Home">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent" aria-controls="navbarSupportContent" aria-expend="false" aria-label="ToggleNavigation">
      	<span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarSupportContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a href="#" class="nav-link" id="bd">Present</a>
        </li>
        <li class="nav-item active">
          <a href="#" class="nav-link" id="bd">Past</a>
        </li>
        <li class="nav-item active">
          <a href="#" class="nav-link" id="bd">Can, will</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container-fluid" id="carousel">
    <div id="carouselHome" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li class="active" data-target="carouselHome" data-slide-to="0"></li>
        <li class="active" data-target="carouselHome" data-slide-to="2"></li>
        <li class="active" data-target="carouselHome" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img/city1.jpg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="img/city2.jpg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="img/city3.jpg" alt="" class="d-block w-100">
        </div>
      </div>
      <a href="#carouselHome" class="carousel-control-prev" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a href="#carouselHome" class="carousel-control-next" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

  <div id="description1">
    <h1 id="h1onthispage">On this site you can find:</h1>
    <h2 id="h2basicgramamr"><span class="color">Basic grammar English rules</span> (you can learn the rules that are easy to understand and to learn).</h2>
    <h2><span class="color">Exercises in English</span> (you can do any exercises for Past, Present and Future).</h2>
  </div>

  <footer>
    <p>Privacy policy © 2018 All rights reserved.</p>
  </footer>
</body>

</html>

P.S. никогда не навешивайте бездумно overflow:hidden на весь документ. Это решение нужно очень внимательно тестировать на всех ширинах по всему документу, такой версткой можно "зарубить" функционал сайта и применять это свойство стоит точечно и только по необходимости.

-1

просто пропиши эти стили, и все проблемы исчезнут

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

    html {
      overflow: hidden; }

    body {
      min-height: 100%; }
1
  • 2
    Если вы практикуете overflow:hidden на весь документ, то хотя бы не советуйте! Такой совет демонстрирует явное не понимание работы этого свойства. Бездумное его применение влечет за собой целый ворох проблем. Вы накладываете ограничение на все блоки, которые в этом не нуждаются, а если понадобится этот функционал вернуть, убрав свойство вы обнаружите, что половина сайта криво сверстана, и нужно все переделывать. Это только если кратко. Почитайте. Это очень грубый и непрофессиональный подход.
    – kizoso
    4 апр 2018 в 2:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.