1

Отчего могла возникнуть ситуация, как на видео?
Сайт продолжается за футером.
Ссылка на видео

@import url("/css/oblacheniya.css");
@import url("/css/oblacheniya-type-select.css");
@import url("/css/product-page.css");
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #B63D32;
}

#page-wrapper {
  width: 100%;
  height: 100%;
}

#content-wrapper {
  width: 80%;
  height: 100%;
  display: inline-block;
  float: right;
}

header {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  position: relative;
  border-top: 2vh solid black;
  border-left: 2vh solid black;
  border-right: 2vh solid black;
  border-bottom: 1vh solid black;
}

.container1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.logo {
  width: 11.1vh;
  height: 11vh;
  padding-top: 0.8vh;
  padding-right: 11.5vh;
}

.logo img {
  width: 11.3vh;
  height: 11vh;
  margin: 0vh auto;
  padding-top: 0vh;
}

.main_title {
  padding-top: 0.2vh;
  margin-left: 0vh;
  padding-right: 0vh;
  font-size: 4vh;
  font-family: Impact, sans-serif;
  color: #fff;
  text-shadow: 0vh 0.4vh rgba(0, 0, 0, .34);
  text-align: center;
}

.subtitle {
  font-size: 2vh;
  font-family: Lobster, sans-serif;
  letter-spacing: 0.14vh;
  font-weight: normal;
  color: #fff;
  text-align: center;
  margin-top: -0.3vh;
  padding-right: 0vh
}

.second_subtitle {
  font-size: 2.3vh;
  color: #000000;
  font-family: Impact, sans-serif;
  text-shadow: 0.1vh 0.05vh 0.3vh rgba(255, 255, 255, 0.6);
  background-color: #666666;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  letter-spacing: -0.055vh;
  text-align: center;
  margin-top: -0.2vh;
}

.top_navigation-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 1.5vh;
  text-align: center;
}

.top_navigation-menu li {
  width: 100%;
}

.top_navigation-menu a {
  text-decoration: none;
  color: white;
}

.top_navigation-menu li {
  display: block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.top_navigation-menu li a {
  color: white;
  text-decoration: none;
  font-size: 2.35vh;
  font-family: Courier, sans-serif;
  font-weight: bolder;
}

.container1 ul {
  padding-bottom: 0vh;
  margin-bottom: 0vh;
}

.container1 ul li {
  padding-bottom: 0vh;
  margin-bottom: 0vh;
}

.container1 ul li>a:hover {
  color: black;
  transition: 0.4s;
}

main {
  width: 100%;
  height: 114vh;
}


/*ЛЕВОЕ МЕНЮ*/


/*ЛЕВОЕ МЕНЮ*/

.spisok {
  display: flex;
  justify-content: center;
  position: fixed;
  height: 100%;
  width: 20%;
  background-color: #7B2019;
  background-repeat: no-repeat;
  /*border*/
  border-top: 1.6vh solid black;
  border-bottom: 2vh solid #000;
  border-left: 1.5vh solid #000;
  border-right: 0vh solid #000;
  /*border ends*/
}

li {
  list-style-type: none;
}

.spisok li {
  width: 24vh;
  list-style-image: none;
  height: 5.5vh;
  background-image: url(/img/span_menu.png);
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-repeat: center no-repeat;
  transition: All 0.3s ease-in-out;
  margin-top: 0.45vh;
}

#oblacheniya {}

.spisok li a {
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-family: CyrillicOldBold, sans-serif;
  letter-spacing: 0.05vh;
  color: white;
  text-decoration: none;
  font-size: 2vh;
  font-weight: normal;
}

.spisok ul>li:hover {
  background-image: url(/img/span_menu_hover.png);
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-repeat: center no-repeat;
  -webkit-transition: All 0.3s ease-in-out;
  -moz-transition: All 0.3s ease-in-out;
  -o-transition: All 0.3s ease-in-out;
  -ms-transition: All 0.3s ease-in-out;
  transition: All 0.3s ease-in-out;
}

.spisok ul li>a:hover {
  text-shadow: gold 0 0 4vh;
  /* Свечение голубого цвета */
  color: white;
}

ul {
  padding-left: 0vh;
}

.button.block {
  display: flex;
  justify-content: center;
  padding-left: 0vh;
}

.spisok ul {
  list-style-image: none;
  display: flex;
  justify-content: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.spisok ul li a p {
  display: flex;
  justify-content: center;
}

#ugol {
  background-image: url(/img/span_menu_black.png);
}

.text-div {
  width: 15.8vh;
  height: 3vh;
}

.letter-spacing {
  letter-spacing: 0.1vh;
}

.ryasi {
  letter-spacing: 0.2vh;
}


/*Начало SECTION*/

section {
  background: url(/img/fon.png);
  background-color: #BFBFBF;
  background-size: cover;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: 114vh;
  /*РАМКА*/
  border-left: 2vh solid black;
  border-top: 0vh solid black;
  border-right: 2vh solid black;
  border-bottom: 0vh solid black;
  /*Конец РАМКИ*/
}

.container2 {
  width: 100%;
  height: 109.9vh;
}

.Nashi_Tseny {
  width: 100%;
  height: 106.9vh;
}

.photo-price {
  height: 100vh;
}

.text-price {
  position: relative;
  margin: 0 auto;
  width: 100vh;
  height: 98vh;
  border: solid transparent;
  border-width: 25vh 10vh 15vh 10vh;
  border-image: url(//i.stack.imgur.com/wky2z.png);
  border-image-slice: 800 250 338;
  border-image-repeat: round;
}

.text-price {
  font-size: 2.3vh;
  font-family: Yanone Kaffeesatz, sans-serif;
  font-style: normal;
  text-decoration-skip-ink: none;
}

.text-price p {
  padding-left: 2vh;
}

#first_abzac {
  margin-top: -2vh;
}

.photo-price {
  height: 97vh;
  width: 100%;
}

.border-price {
  max-width: 10vh;
}

.choose_otstup {
  margin-left: 1vh;
}

h2 {
  margin-top: 3vh;
  font-size: 4.7vh;
  font-family: Impact;
  font-weight: 400;
  padding-top: 0.5vh;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-align: center;
}

strong {
  font-weight: bolder;
  font-size: 2.1vh;
}

.vosem_tis {
  font-style: italic;
  font-weight: 900;
  font-family: Lobster, sans-serif;
  font-size: 1.9vh;
}


/*НАЧАЛО FOOTER*/

footer {
  width: 100%;
  height: 15vh;
  border-left: 2vh solid black;
  border-right: 2vh solid black;
  ;
  border-top: 1vh solid black;
  ;
  border-bottom: 2vh solid black;
  ;
}


/*КОНЕЦ FOOTER*/

#leftmenu-wrapper {
  float: left;
  display: inline-block;
  width: 20%;
  height: 100%;
}


/*@media only screen and (max-width: 1024px) {
h2{
  padding-right: 11%;
}
}
@media only screen and (min-width: 1999px) and (max-width: 1400px) {
h2{
  margin-left: 13.5vh;
}
}
@media only screen and (min-width: 1400px) {
h2{
  padding-left: 520px;
}
}
@media only screen and (min-width: 1220px) {
h2{
  padding-left: 120px;
}
}
@media only screen and (min-width: 1355px) {
h2{
  padding-left: 300px;
}
}
@media only screen and (min-width: 1504px) {
h2{
  padding-left: 380px;
}
}
@media only screen and (min-width: 1700px) {
h2{
  padding-left: 520px;
}
}
@media only screen and (max-width: 1100px) {
h2{
  padding-right: 90px;
}
}
*/
<main>

  <section>
    <div class="container2">
      <div class="Nashi_Tseny">
        <h2>Наши цены:</h2>
        <div class="photo-price">
          <div class="text-price">
            <p id="first_abzac"><u><b>Облачения</b></u>:</p>
            <p class="choose_otstup">-иерейские <strong>шелковые</strong> от <strong><span class="vosem_tis">9000</span></strong> &nbsp; рублей с шикарными галунами</p>
            <p class="choose_otstup">-иерейские <strong>парчевые</strong> от <strong><span class="vosem_tis">10000</span>&nbsp;</strong> рублей<strong>*</strong></p>
            <p><u><b>Подрясники</b></u>:</p>
            <p><u><b>Подризники</b></u>:</p>
            <p><u><b>Рясы</b></u>:</p>
            <p><u><b>Стихари</b></u>:</p>
            <p><u><b>Скуфии</b></u>:&nbsp;от 800 рублей;</p>
            <p><u><b>Камилавки</b></u>:&nbsp;от 1700</p>
            <p><u><b>Крещальные</b></u>:</p>
            <p><u><b>Облачения для храма</b></u>:</p>
            <p><u><b>Вышитые кресты</b></u>:</p>
            <p><u><b>Кадильный уголь</b></u>:</p>
            <p>*парчевые облачения с индийскими галунами шьются по заказу</p>
          </div>
        </div>
      </div>
  </section>
</main>



<footer>
  <div class="container3">
  </div>
</footer>
</div>

</div>
</body>

</html>

@media (max-width: 970px) {
  .spisok li {
    width: 22vh;
    list-style-image: none;
    height: 5.5vh;
    margin: 0 auto;
    display: block;
    background-image: url(/img/span_menu.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: center no-repeat;
    transition: All 0.3s ease-in-out;
  }
  .spisok ul li a p {
    padding-top: 2vh;
    margin-top: 0.42vh;
  }
}

@media (max-width: 920px) {
  .spisok li {
    width: 16.5vh;
    list-style-image: none;
    height: 5.5vh;
    margin: 0 auto;
    display: block;
    background-image: url(/img/span_menu.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: center no-repeat;
    transition: All 0.3s ease-in-out;
  }
}

@media (max-width: 650px) {
  #content-wrapper {
    width: 100%;
  }
  .spisok {
    display: none;
  }
}

@media (max-width: 1325px) {
  .spisok li {
    width: 20vh;
    list-style-image: none;
    height: 5.4vh;
    margin: 0 auto;
    display: block;
    background-image: url(/img/span_menu.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: center no-repeat;
    transition: All 0.3s ease-in-out;
  }
}

@media (max-width: 1250px) {
  .spisok li {
    width: 20vh;
    list-style-image: none;
    height: 6.5vh;
    margin: 0 auto;
    display: block;
    background-image: url(/img/span_menu.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: center no-repeat;
    transition: All 0.3s ease-in-out;
  }
}

@media (max-width: 1295px) {
  .text-price {
    position: relative;
    margin: 0 auto;
    width: 90vh;
    height: 98vh;
    border: solid transparent;
    border-width: 25vh 10vh 15vh 10vh;
    border-image: url(//i.stack.imgur.com/wky2z.png);
    border-image-slice: 800 250 338;
    border-image-repeat: round;
  }
}

@media (max-width: 1155px) {
  .text-price {
    position: relative;
    margin: 0 auto;
    width: 70vh;
    height: 98vh;
    border: solid transparent;
    border-width: 25vh 10vh 15vh 10vh;
    border-image: url(//i.stack.imgur.com/wky2z.png);
    border-image-slice: 800 250 338;
    border-image-repeat: round;
  }
}

@media (max-width: 1090px) {
  .text-price {
    position: relative;
    margin: 0 auto;
    width: 70vh;
    height: 98vh;
    border: solid transparent;
    border-width: 25vh 10vh 15vh 10vh;
    border-image: url(//i.stack.imgur.com/wky2z.png);
    border-image-slice: 800 250 338;
    border-image-repeat: round;
  }
  .spisok li {
    width: 16.5vh;
    list-style-image: none;
    height: 5.5vh;
    margin: 0 auto;
    display: block;
    background-image: url(/img/span_menu.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: center no-repeat;
    transition: All 0.3s ease-in-out;
  }
  .spisok li a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-family: CyrillicOldBold, sans-serif;
    letter-spacing: 0.05vh;
    color: white;
    text-decoration: none;
    font-size: 1.6vh;
    font-weight: normal;
  }
}

@media (max-width: 900px) {
  .text-price {
    position: relative;
    margin: 0 auto;
    width: 60vh;
    height: 99vh;
    border: solid transparent;
    border-width: 25vh 10vh 15vh 10vh;
    border-image: url(//i.stack.imgur.com/wky2z.png);
    border-image-slice: 800 250 338;
    border-image-repeat: round;
  }
  .spisok li {
    width: 15.8vh;
    list-style-image: none;
    height: 5.5vh;
    margin: 0 auto;
    display: block;
    background-image: url(/img/span_menu.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: center no-repeat;
    transition: All 0.3s ease-in-out;
  }
  .spisok li a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-family: CyrillicOldBold, sans-serif;
    letter-spacing: 0.05vh;
    color: white;
    text-decoration: none;
    font-size: 1.4vh;
    font-weight: normal;
  }
}

@media (max-width: 360px) {
  header {
    border-top: 1vh solid black;
    border-left: 1vh solid black;
    border-right: 1vh solid black;
    border-bottom: 0.8vh solid black;
  }
  section {
    border-left: 1vh solid black;
    border-top: 0vh solid black;
    border-right: 1vh solid black;
    border-bottom: 0vh solid black;
  }
  .text-price {
    width: 100%;
    height: 100%;
    border: 0;
    font-size: 2.8vh;
    position: relative;
    margin: 0 auto;
  }
  .spisok li {
    width: 15.8vh;
    list-style-image: none;
    height: 5.5vh;
    margin: 0 auto;
    display: block;
    background-image: url(/img/span_menu.png);
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-repeat: center no-repeat;
    transition: All 0.3s ease-in-out;
  }
  .spisok li a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-family: CyrillicOldBold, sans-serif;
    letter-spacing: 0.05vh;
    color: white;
    text-decoration: none;
    font-size: 1.4vh;
    font-weight: normal;
  }
}

8
  • 1
    а код опять случайно не прикрепился? :) 18 дек 2018 в 13:16
  • @humster_spb в этот раз по рассеянности. Готово с:
    – Alex
    18 дек 2018 в 13:22
  • В приведённом коде проблема не воспроизводится - никакого продолжения за футером нет. Возможно, проблема в css-файлах, которые Вы импортируете (сюда они, естественно, не импортируются) 18 дек 2018 в 13:29
  • @humster_spb Вы пробовали с мобильной версии? Просто на компьютере и у меня все хорошо
    – Alex
    18 дек 2018 в 13:31
  • @humster_spb есть файл с media-запросами, добавил в описание
    – Alex
    18 дек 2018 в 13:32

1 ответ 1

0

Нашел решение проблемы. В коде был лишний блок, который вылазил за футер.

Ваш ответ

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

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