Отчего могла возникнуть ситуация, как на видео?
Сайт продолжается за футером.
Ссылка на видео
@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> рублей с шикарными галунами</p>
<p class="choose_otstup">-иерейские <strong>парчевые</strong> от <strong><span class="vosem_tis">10000</span> </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>: от 800 рублей;</p>
<p><u><b>Камилавки</b></u>: от 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;
}
}