0

html {
  height: 100%;
}

body {
  background-color: #fbdb9e"
 padding-top: 65%;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
  width: 1920px;
  height: 1080px;
}

.colortext {
  color: black;
}

.footer {
  background-color: #fbdb9e;
  border: 1px solid black;
  position: absolute;
  bottom: 0;
  height: 29px;
  width: 100%;
  clear: both;
}

.nax {
  position: absolute;
  padding-top: 15%;
  color: black;
  max-width: 100%;
}

nav {
  background-color: ;
  position: relative;
}

#header {
  position: absolute;
  z-index: 10000;
}

.img {
  height="250px";
  width="400px";
}

@media (min-width 420px) {
  img {
    max-width: 48%
  }
}
<div class="site-wrapper">

  <div class="cover-container">
    <div id="header" class="masthead clearfix">
      <div class="inner">
        <nav class="nav nav-masthead">
          <a class="nav-link " style=color:rgb(0,0,0) href="Cover Template for Bootstrap.html">Начальная страница</a>
          <a class="nav-link" style=color:rgb(0,0,0) href="История создания.html">История создания<br>&quot;Мертвые души&quot;</a>
          <a class="nav-link active" style=color:rgb(0,0,0) href="Краткий сюжет.html">Краткий сюжет</a>
          <a class="nav-link" style=color:rgb(0,0,0) href="Герои романа.html">Герои романа</a>
          <a class="nav-link" style=color:rgb(0,0,0) href="Галерея.html">Галерея</a>

        </nav>
      </div>
      <div class="nax">
        <hr>
        <p align="left">
          В маленький городок приезжает Павел Чичиков, мужчина среднего возраста с округлыми чертами лица. Поселившись в гостинице, Чичиков начинает расспрашивать трактирщика о городе и его обитателях. Позже он сам отправится с визитами к губернатору, чиновникам
          и помещикам. С каждым он ведёт себя вежливо и учтиво, сумев таким образом расположить к себе всех. О себе Чичиков рассказывает мало, на все вопросы отвечает уклончиво. </p>
        <p align="left">
          Вскоре Чичиков отправляется в гости к помещику Манилову. Хозяин до приторности ласков и любезен с гостем. Чичиков признаётся, что желает выкупить умерших крестьян, чья смерть еще не прописана в бумагах. Убедив Манилова, он покупает мёртвые души и отправляется
          дальше. Вскоре он знакомится с Настасьей Коробочкой, бестолковой и пугливой старушкой. Мужчине удалось убедить помещицу продать ему души.Далее он посетил помещика Собакевича. Собакевич нисколько не встревожен сомнительным предложением Чичикова
          относительно продажи мёртвых душ и, торгуясь, продает ему их. </p>
        <p align="left">
          Утром Чичиков в сопровождении Манилова идет в Палату заключить сделку. Дав взятки ответственным лицам, Павлу удаётся заверить куплю мертвых душ. </p>
        <p align="left">
          По городку тем временем пошла молва об ушлом Чичикове. Поговаривали, что у него миллионы на счетах, девушки мечтают познакомиться с проворным дельцом. </p>
        <p align="left">
          Губернатор устраивает бал, на которым собирается весь свет города. Чичикова буквально разрывают дамы, но он следит за дочерью губернатора, молодой юной девушкой, только что выпустившейся из института. Оставшиеся без его внимания дамы возмущены, а тут
          ещё вламывается пьяный Ноздрев, устроивший скандал. Чичиков поспешно удалился с приёма. Слухи постепенно обрастают новыми деталями и домыслами, и в конечном итоге весь городок обсуждает, как Чичиков угрозами и шантажом вынудил бедную Коробочку
          совершить невыгодную сделку. Другие судачили, что всё, чего хотел Чичиков – увести дочь губернатора. В это время становится известно о беглом разбойнике Копейкине, и горожане решили, что это и есть Чичиков. Кто-то высказывался даже, что Павел
          – это сам Наполеон. В домах перестают принимать Чичикова, так что ему пришлось покинуть город. Герой всеми способами и любыми доступными путями пытался сколотить себе состояние. До аферы с мёртвыми душами он служил на таможне, где беззастенчиво
          брал взятки от контрабандистов. Попав под следствие, он покинул губернию, оставшись ни с чем.
        </p>
        <hr>
        <img class="img" src="images/Heroes/img146.png" align="center" alt="Я хз почему не отображается" />


      </div>
    </div>
  </div>
</div>



<footer>
  <div class="footer">
    <center><a class="colortext" href="О нас.html">О нас</a></center>
  </div>
</footer>

<script src="./Cover Template for Bootstrap_files/jquery-3.1.1.slim.min.js.Без названия" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>
  window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="./Cover Template for Bootstrap_files/tether.min.js.Без названия" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="./Cover Template for Bootstrap_files/bootstrap.min.js.Без названия"></script>
<script src="./Cover Template for Bootstrap_files/ie10-viewport-bug-workaround.js.Без названия">
</script>

вот ссылка на видос, как все происходит При изменении масштаба в меньшую сторону, то футер поднимается + там где был футер-серый фон и картинка, остается на одном месте. Что делать? Изначально использовал framework bootstrap-cover

1
  • А масштаб при чем? На кой тебе надо что бы при изменении масштаба футтер стоял на месте?
    – Air
    3 дек 2018 в 11:51

1 ответ 1

0

Проблема состоит в том, что в body ты задаешь фиксированную высоту и ширину.

Сделай вот это и не трогай там ничего) и проблема должна уйти. если нет - то я перерасмотрю свой ответ

P.S. личный комментарий от себя - пиши на чистом CSS... Больше времени на изучение bootstrap потратишь

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

Вот как я бы сделал бы ту страницу: В данном коде убрана та ошибка, что была у тебя.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #fbdb9e;
  font-family: 'Open Sans', sans-serif; }

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  nav > div {
    width: 40%;
    display: flex;
    flex-direction: row; }
    nav > div > a {
      width: 100%;
      text-align: center;
      color: black;
      padding: 3vw 0;
      text-decoration: none;
      font-size: 1vw;
      font-weight: 600; }
      nav > div > a:hover {
        border-bottom: 0.4vw solid rgba(255, 255, 255, 0.4); }

.current {
  border-bottom: 0.4vw solid white; }

.division_line {
  border: 0.03vw solid rgba(0, 0, 0, 0.1);
  width: 40%; }

.short {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .short > div {
    width: 40%;
    font-size: 1vw;
    font-weight: 400; }
  .short > img {
    margin-top: 2vw;
    width: 40%; }@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #fbdb9e;
  font-family: 'Open Sans', sans-serif; }

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  nav > div {
    width: 40%;
    display: flex;
    flex-direction: row; }
    nav > div > a {
      width: 100%;
      text-align: center;
      color: black;
      padding: 3vw 0;
      text-decoration: none;
      font-size: 1vw;
      font-weight: 600; }
      nav > div > a:hover {
        border-bottom: 0.4vw solid rgba(255, 255, 255, 0.4); }

.current {
  border-bottom: 0.4vw solid white; }

.division_line {
  border: 0.03vw solid rgba(0, 0, 0, 0.1);
  width: 40%; }

.short {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .short > div {
    width: 40%;
    font-size: 1vw;
    font-weight: 400; }
  .short > img {
    margin-top: 2vw;
    width: 40%; }
<nav>
    <div>
        <a href=""><span>Начальная страница</span></a>
        <a href="">История создания &quot;Мертвые души&quot;</a>
        <a href="" class="current">Краткий сюжет</a>
        <a href="">Герои романа</a>
        <a href="">Галерея</a>
    </div>
</nav>
<hr class="division_line">
<div class="short">
    <div>
        В маленький городок приезжает Павел Чичиков, мужчина среднего возраста с округлыми чертами лица. Поселившись в гостинице, Чичиков начинает расспрашивать трактирщика о городе и его обитателях. Позже он сам отправится с визитами к губернатору, чиновникам
        и помещикам. С каждым он ведёт себя вежливо и учтиво, сумев таким образом расположить к себе всех. О себе Чичиков рассказывает мало, на все вопросы отвечает уклончиво.
        <br><br>
        Вскоре Чичиков отправляется в гости к помещику Манилову. Хозяин до приторности ласков и любезен с гостем. Чичиков признаётся, что желает выкупить умерших крестьян, чья смерть еще не прописана в бумагах. Убедив Манилова, он покупает мёртвые души и отправляется
        дальше. Вскоре он знакомится с Настасьей Коробочкой, бестолковой и пугливой старушкой. Мужчине удалось убедить помещицу продать ему души.Далее он посетил помещика Собакевича. Собакевич нисколько не встревожен сомнительным предложением Чичикова
        относительно продажи мёртвых душ и, торгуясь, продает ему их.
        <br><br>
        Утром Чичиков в сопровождении Манилова идет в Палату заключить сделку. Дав взятки ответственным лицам, Павлу удаётся заверить куплю мертвых душ.
        <br><br>
        По городку тем временем пошла молва об ушлом Чичикове. Поговаривали, что у него миллионы на счетах, девушки мечтают познакомиться с проворным дельцом.
        <br><br>
        Губернатор устраивает бал, на которым собирается весь свет города. Чичикова буквально разрывают дамы, но он следит за дочерью губернатора, молодой юной девушкой, только что выпустившейся из института. Оставшиеся без его внимания дамы возмущены, а тут
        ещё вламывается пьяный Ноздрев, устроивший скандал. Чичиков поспешно удалился с приёма. Слухи постепенно обрастают новыми деталями и домыслами, и в конечном итоге весь городок обсуждает, как Чичиков угрозами и шантажом вынудил бедную Коробочку
        совершить невыгодную сделку. Другие судачили, что всё, чего хотел Чичиков – увести дочь губернатора. В это время становится известно о беглом разбойнике Копейкине, и горожане решили, что это и есть Чичиков. Кто-то высказывался даже, что Павел
        – это сам Наполеон. В домах перестают принимать Чичикова, так что ему пришлось покинуть город. Герой всеми способами и любыми доступными путями пытался сколотить себе состояние. До аферы с мёртвыми душами он служил на таможне, где беззастенчиво
        брал взятки от контрабандистов. Попав под следствие, он покинул губернию, оставшись ни с чем.
    </div>
    <img src="https://a4format.ru/photos/42203f31.jpg" alt="">
</div>

2
  • а с футером что делать? и в чепм была моя ошибка, я так и не понял. прост нам сайт задали сделать по литре(профиль инфотеха в шк) и факстиком по html чекнул видосики и пошел-поехал 4 дек 2018 в 7:02
  • @НазарМатвиенко А зачем он тебе? ты в него ничего не писал) Футер не обязателен на сайте 8 дек 2018 в 17:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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