0

На домашней странице он отображается нормально. Но при переходе на другую он отображается не так как на первой. Если что то использую 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>

3
  • Добавьте контент или прижмите футер к низу
    – E_K
    Commented 6 апр. 2018 в 23:09
  • 3
    Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана?
    – user33274
    Commented 7 апр. 2018 в 4:48
  • а как оно отображается на главной странице ?
    – user33274
    Commented 7 апр. 2018 в 6:05

2 ответа 2

3

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

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

0

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

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

Ваш ответ

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

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