Неправильное отображение футера

Question

На домашней странице он отображается нормально. Но при переходе на другую он отображается не так как на первой. Если что то использую bootsrap.

body {
  margin: 0;
  background-color: white;
  text-decoration: none;
}
#navbarDropdown,
.navbarDropdown {
  color: white;
  text-transform: uppercase;
  font-size: 1.1em;
}
#carousel {
  padding: 0px;
}
#bd {
  font-size: 1.2em;
}
@media (min-width: 1351px) {
  .rulesprs {
    margin-left: 10%;
    margin-top: 10%;
    color: black;
    font-size: 2.5em;
  }
  #description1 {
    width: 69%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 17%;
    margin-bottom: 2%;
  }
  #onthispage {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 2.2em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 2.2em;
    font-weight: bold;
  }
}
@media (max-width: 1350px) and (min-width: 1061px) {
  #description1 {
    width: 60%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 18%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 2.3em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 1.5em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 1.5em;
    font-weight: bold;
  }
}
@media (max-width: 1060px) and (min-width: 821px) {
  #description1 {
    width: 60%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 18%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 1.1em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 1.1em;
    font-weight: bold;
  }
}
@media (max-width: 820px) and (min-width: 720px) {
  #description1 {
    width: 70%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 15%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 1em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 1em;
    font-weight: bold;
  }
}
@media (max-width: 719px) and (min-width: 550px) {
  #description1 {
    width: 75%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 12%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 1em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 1em;
    font-weight: bold;
  }
}
@media (max-width: 549px) and (min-width: 404px) {
  #description1 {
    width: 80%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 10%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 0.8em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 0.8em;
    font-weight: bold;
  }
}
@media (max-width: 403px) {
  #description1 {
    width: 90%;
    border: 3px dashed grey;
    padding: 4%;
    margin-top: 2%;
    margin-left: 5%;
    margin-bottom: 2%
  }
  #onthispage {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 4%;
  }
  #text1 {
    margin-bottom: 4%;
    font-size: 0.7em;
    font-weight: bold;
  }
  #text2 {
    width: 103%;
    height: 3%;
    font-size: 0.7em;
    font-weight: bold;
  }
}
.color {
  color: red;
}
.dropdown-item-hover,
.dropdown-item-focus {
  color: #FFD700;
}
/* Footer */
footer {
  background-color: #273037;
  color: white;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  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>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="englishfan.html" 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 dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Present
            </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="presentsimple.html" id="cls">Present simple</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Present continuous</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Present perfect</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Past
            </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Past simple</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Past continuous</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Past perfect</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Can, Will
            </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Can, Could</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Will, Would</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

  <div>
    <a href="#">
      <p>Rules of Present simple</p>
    </a>
  </div>

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

</html>

Добавьте контент или прижмите футер к низу — E_K, Apr 06 '18 at 23:09
Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана? — , Apr 07 '18 at 04:48
а как оно отображается на главной странице ? — , Apr 07 '18 at 06:05

score 3 · Answer 1 · answered Apr 06 '18 at 23:14

Способ что бы прижать футер к нижней части страницы

.site-main {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.site-content {
  flex: 1;
}
header,
footer {
  width: 100%;
  height: 50px;
  background: lightblue;
}

<div class="site-main">
  <header>Header</header>
  <main class="site-content"></main>
  <footer>Footer</footer>
</div>

score 0 · Answer 2 · answered Apr 07 '18 at 10:40

Как вариант задать абсолютное позиционирование

body {
     margin: 0;
     background-color: white;
     text-decoration: none;
    }
    #navbarDropdown, .navbarDropdown{ 
      color: white;
      text-transform: uppercase;
      font-size: 1.1em;
    }
#carousel {
 padding: 0px;
}
#bd {
 font-size: 1.2em;
}
@media (min-width: 1351px) {
.rulesprs {
 margin-left: 10%;
 margin-top: 10%;
 color: black;
 font-size: 2.5em;
}
#description1 {
 width: 69%;
 border: 3px dashed grey;
 padding: 4%;
 margin-top: 2%;
 margin-left: 17%;
 margin-bottom: 2%;
}
#onthispage{
 font-size: 3.5em;
 font-weight: bold;
 margin-bottom: 4%;
}
#text1 {
 margin-bottom: 4%;
 font-size: 2.2em;
 font-weight: bold;
}
#text2 {
 width: 103%;
 height: 3%;
 font-size: 2.2em;
 font-weight: bold;
}
}
@media (max-width: 1350px) and (min-width: 1061px){
#description1 {
 width: 60%;
 border: 3px dashed grey;
 padding: 4%;
 margin-top: 2%;
 margin-left: 18%;
 margin-bottom: 2%
}
#onthispage{
 font-size: 2.3em;
 font-weight: bold;
 margin-bottom: 4%;
}
#text1 {
 margin-bottom: 4%;
 font-size: 1.5em;
 font-weight: bold;
}
#text2 {
 width: 103%;
 height: 3%;
 font-size: 1.5em;
 font-weight: bold;
}
}
@media (max-width: 1060px) and (min-width: 821px){
#description1 {
 width: 60%;
 border: 3px dashed grey;
 padding: 4%;
 margin-top: 2%;
 margin-left: 18%;
 margin-bottom: 2%
}
#onthispage{
 font-size: 1.8em;
 font-weight: bold;
 margin-bottom: 4%;
}
#text1 {
 margin-bottom: 4%;
 font-size: 1.1em;
 font-weight: bold;
}
#text2 {
 width: 103%;
 height: 3%;
 font-size: 1.1em;
 font-weight: bold;
}
}
@media (max-width: 820px) and (min-width: 720px){
#description1 {
 width: 70%;
 border: 3px dashed grey;
 padding: 4%;
 margin-top: 2%;
 margin-left: 15%;
 margin-bottom: 2%
}
#onthispage{
 font-size: 1.5em;
 font-weight: bold;
 margin-bottom: 4%;
}
#text1 {
 margin-bottom: 4%;
 font-size: 1em;
 font-weight: bold;
}
#text2 {
 width: 103%;
 height: 3%;
 font-size: 1em;
 font-weight: bold;
}
}
@media (max-width: 719px) and (min-width: 550px){
#description1 {
 width: 75%;
 border: 3px dashed grey;
 padding: 4%;
 margin-top: 2%;
 margin-left: 12%;
 margin-bottom: 2%
}
#onthispage{
 font-size: 1.5em;
 font-weight: bold;
 margin-bottom: 4%;
}
#text1 {
 margin-bottom: 4%;
 font-size: 1em;
 font-weight: bold;
}
#text2 {
 width: 103%;
 height: 3%;
 font-size: 1em;
 font-weight: bold;
}
}
@media (max-width: 549px) and (min-width: 404px){
#description1 {
 width: 80%;
 border: 3px dashed grey;
 padding: 4%;
 margin-top: 2%;
 margin-left: 10%;
 margin-bottom: 2%
}
#onthispage{
 font-size: 1.2em;
 font-weight: bold;
 margin-bottom: 4%;
}
#text1 {
 margin-bottom: 4%;
 font-size: 0.8em;
 font-weight: bold;
}
#text2 {
 width: 103%;
 height: 3%;
 font-size: 0.8em;
 font-weight: bold;
}
}
@media (max-width: 403px){
#description1 {
 width: 90%;
 border: 3px dashed grey;
 padding: 4%;
 margin-top: 2%;
 margin-left: 5%;
 margin-bottom: 2%
}
#onthispage{
 font-size: 0.9em;
 font-weight: bold;
 margin-bottom: 4%;
}
#text1 {
 margin-bottom: 4%;
 font-size: 0.7em;
 font-weight: bold;
}
#text2 {
 width: 103%;
 height: 3%;
 font-size: 0.7em;
 font-weight: bold;
}
}
.color {color: red;}
.dropdown-item-hover, .dropdown-item-focus {color: #FFD700;}

/* Footer */
footer{
 background-color: #273037;
 color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

footer p {
    padding: 10.5px;
    margin: 0px;
    line-height: 100%;
    margin-bottom: 0px;
}</code></pre>

<!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>

    </head>
    <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a href="englishfan.html" 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 dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Present
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="presentsimple.html" id="cls">Present simple</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Present continuous</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Present perfect</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Past
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Past simple</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Past continuous</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Past perfect</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Can, Will
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Can, Could</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Will, Would</a>
            </div>
          </li>
        </ul>
      </div>
     </nav>

     <div>
       <a href="#"><p>Rules of Present simple</p></a>
     </div>

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

Неправильное отображение футера

2 Answers2