1

Есть сверстаный сайт. Сверстан, конечно коряво. Но вот проблема с background-color никак не ожидалось. Проблема заключается в том, что в процессе серфинга по сайту background-color к тегу body применяется не всегда. Применяется, где-то в 80% случаев. При чем, остальная верстка ложится как и ожидается. Такое поведение замечено как в Хроме так и в Мозилле. В идеале, конечно, нужно дать ссылку на сайт, но я не хочу позориться). Может кто сталкивался с такой проблемой? Вот все стили, которые применяются к body.

body {
    min-height: 250vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(179,213,103);
}

Элементов, которые бы по величине были бы с body и могли бы его перекрывать - нет. normalize.css не влияет - я его и включал и выключал

П.С.: Раззадорил меня модератор, не верит на слово) Попробовал я купировать проблему, вроде бы получилось даже круче - срабатывает постоянно). Только, пробовать, наверное, надо у себя на компе. Здесь не воспроизводится

body{
min-height: 250vh;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: rgb(179,213,103);
}

#bodyWrapper {
flex-grow: 4;
position: relative;
left: 5%;
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#cap {
width: 100%;
height: 7vh;
align-self: flex-start;
display: flex;
justify-content: flex-end;
align-self: flex-end;	
}
#header {
height: 25vh;
display: flex;
justify-content: space-between;
/*border: 1px solid;*/
margin-bottom: 1vh;
}
#contentWrapper {
flex-grow: 5;

}
#footer {
background-color: powderblue;
height: 20vh;
}
#constructInfoWrap {
display: none;
justify-content: center;
/*background-color: rgba(0,0,0,0.7);*/
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;

}
#constructInfo {
top: 20vh;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid red;
width: 25%;
height: 25%;
background-color: white;
border-radius: 10px;
}
#constructInfo p {
font-size: 25px;
padding-left: 10px;
padding-right: 10px;
}
#constructInfo button {
font-weight: bold;
color: #236277;
text-shadow: 0 1px #c2ecf9;
background: #61cdf3;
border-color: #6fbad1 #3fa3c0 #3583ab;
box-shadow: inset 0 1px #c5f0fd, inset 0 0 0 1px #8ad1eb, 0 1px #3583ab, 0 3px #3f9db8, 0 4px #3583ab, 0 5px 2px rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to bottom, #9be5fa, #61cdf3 70%, #5fbde8);

border-radius: 5px;
margin-bottom: 3%;
align-self: center;
width: 30%;
height: 18%;
}
#constructInfo button:hover {
  cursor: pointer;
  background: #61cdf3;
  border-top-color: #3eaac9;
}
#constructInfo button:active {
  cursor: pointer;
  background: #61cdf3;
  border-top-color: #3eaac9;
  vertical-align: -5px;
  margin-bottom: 2%;
  padding: 1px 13px 0;
  border-width: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}

/*************************C A P**************************/

#cap a{
margin-left:4vh;
margin-right: 4vh;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 2px;
text-decoration: none;
font-size: 2vh;
cursor: pointer;

}
#cap a:visited, #cap a:link {
color: black;
}
#cap a p{
display: inline-block;
margin: 0px;
text-align: center;
}
/**********************H E A D E R ******************/

#logo{
position: relative;
width: 33%;
height: 100%;
}
#center {
position: relative;
width: 33%;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
#phone {
height:80%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#phone img{
margin-left:3%;
align-self: center;
height: 35%;
}
#numberPhone{
width:85%;
display: flex;
}
#numberPhone p{
font-size: 18px;
margin: 0px;
margin-left: 3vh;
text-align: left;
align-self: center;
line-height: 6vh;
border-radius: 5px;
}
#search {
height: 20%;
display: flex;
flex-direction: row-reverse;
justify-content:flex-start;
}
#search input{
width: 80%;
height: 60%;
border-radius: 10px 10px 10px 10px;
margin-right:21%;

}
#btn_search {
background-image: url(../img/button-search.png);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: 50%;
position: absolute;
right: 20%;
width: 5vh;
height: 14%;
cursor: pointer;

}

.cartWrap {
width: 33%;
height: 100%;
/*border: 1px solid;*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
#svgLoaderAjax {
align-self: center;
display: none;

}
#cart {
width: 70%;
height: 70%;
display: flex;
flex-direction: column;
}
#cart h3,h5{
margin: 1vh;
}

#miniCart {
background-color: white;
position: absolute;
top: 32vh;
width: 33%;
border: 1px solid blue;
z-index: 10000;
display: none;
flex-direction: column;

}
.miniCart_product {
display: flex;
justify-content: space-between;
border-bottom: 2px dotted;
margin-top: 2px;
font-size: 14px;
}
.miniCart_product_link{
	border: 1px solid;
}
 .miniCart_product_link img{
 	width: 7vh;
 	height: 9vh;
 	margin: 5px;

 }
 .miniCart_product_info {
 	flex-grow: 2;
 	display: flex;
 	/*border: 1px solid;*/
 }
 .miniCart_product_info p{
 	margin: 0px;
 	text-align: left;
 	width: 50%;
 	padding-left: 2px;
 	padding-top: 1vh;
 }
 .miniCart_product_name {
 	text-align: center;
 	margin: 0px;
 	width: 40%;
 	padding-top: 1vh;
 }
.miniCart_product_delete{
align-self: center;
border: 1px solid;
width: 2vh;
height: 2vh;
cursor: pointer;
}
.none{
width: 33%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


/***************************main_nav*****************************/
#sdfs {
height: 4vh;
}
.main_nav_class {
background-color: #CBADD2;
color: white;
position: relative;
display: flex;
align-items:center;
/*justify-content: center;*/
height: 6vh;
}
.fixed {
width:90%;
background-color: #CBADD2;
top:0;
color: white;
position: fixed;
display: flex;
align-items:center;
height: 6vh;
z-index: 10;
}
#main_nav_ul{
list-style: none;
padding: 0px;
margin: 0px 0px 0px 0px ;
display: flex;
flex-direction:row;
justify-content: flex-start;
}
#main_nav_ul> .navList:nth-child(1) {
background-color:  #cbadd2;
}
#main_nav_ul> .navList:nth-child(2) {
background-color:  #00B7CE;
}
#main_nav_ul> .navList:nth-child(3) {
background-color: #f888b3;
}
#main_nav_ul> .navList:nth-child(4) {
background-color: #9C71AE;
}
#main_nav_ul> .navList:nth-child(5) {
background-color: #F14941;
}
.navList{
padding-left: 3vh;
padding-right: 3vh;
position: relative;
text-transform: uppercase;
height: 6vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.navList a{
text-decoration: none;
cursor: pointer;
}
.navList a:link, .navList a:visited {
color:white;
}
.navListItem {
box-sizing: border-box;
display:block;
font-size: 19px;
margin-top:2vh;
transition-duration: 0.5s;
text-transform: none;
text-align: left;
min-width: 25vh;
cursor: pointer;

}

.navList__div {
background-color: inherit;
position: absolute;
top: 6vh;
display: none;
justify-content: space-between;
flex-direction: row;
transition-duration: 0.5s;
border-radius: 0px 0px 10px 10px;
left: 0vh;
padding-bottom: 2vh;
z-index: 100;
}

.navList:hover > .navList__div{
display: flex;
}
.navListItem:hover {
padding-left: 2vh;
}
.ul__navList {
padding: 0px;
padding-right: 3vh;
padding-left: 2vh;
}

/*************************contentWrapper*********************/
.contentWrapper {
margin-top: 3vh;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
background-color: white;
}

.contentWrapperCategory {
margin-top: 3vh;
display: flex;
justify-content: space-between;
background-color: white;
}


/******************************left_content_column***************************/
#left_content_column{
flex-grow: 0;
flex-shrink: 0;
flex-basis: 20%;
border: 1px solid;
display:none;

}
#left_content_column h1{
text-align: center;
font-size: 4vh;
color: red;
}
label {
margin-left: 2vh;
padding-right: 1vh;
}
/**********************************rigth_content_column********************************/
#rigth_content_column {
flex-grow: 5;
display: flex;
justify-content: space-between;
background-color: white;
flex-direction: column;
}
.content {
flex-grow: 7;
display:flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: flex-start;
}

.category {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 4vh;
border: 2px solid;
height: 50vh;
width: 40vh;
border-radius: 10px;
margin-left: 2vh;
margin-right: 2vh;
margin-bottom: 0px;
}
.category_link {
height: 38vh;
flex-grow: 2;
display: flex;
justify-content: center;

}
.category_name {
display: flex;
justify-content: center;
height: 7vh;
margin: 0px;
cursor: pointer;
}
.category_name a{
align-self: flex-start;
cursor: pointer;
font-size: 3vh;
text-decoration: none;
}
.category_name a:link, .category_name a:visited{
color: black;
}
.category_link img{
align-self: center;
width: 85%;
height: 85%;
}
    <div id="bodyWrapper">
        <div id="cap">
            <a href="#"><p>Условия <br>сотрудничества</p></a>
            <a href="#"><p>Условия <br>доставки и оплаты</p></a>
            <a href="#"><p>Контакты</p></a>
        </div>
        <header id="header">            
            <article id="logo"> <a href="#"> logo</a></article>
            <div id="center">
                <div id="phone">
                    <img src="img/ico-phone.png" alt="">
                    <div id="numberPhone"><p>(097)111-11-11<br>(093)111-11-11<br>(050)111-11-11</p></div>
                </div>
                <div id="search">
                <!-- <div id="btn_search"></div> -->
                    <input id="inputSearch" type="text">
                </div>
            </div>
            <div id="cartWrap" class="cartWrap">
                <div id="cart">
                    <h3>Ваша корзина</h3>
                    <h5>Товаров - <span id="spanValueCartProduct">0</span></h5>
                    <h5>На сумму - <span id="spanSumCartProduct"> 0 грн.</span></h5>
                   
                </div>
                <div id="miniCart">
                    <section><h3>Корзина пуста</h3></section>
                </div>
            </div>
        </header>
    
    
        <div id="sdfs">
            <nav id="main_nav" class="main_nav_class">
            <ul id="main_nav_ul">
                <li class="navList"><a href="index.html">HOME</a></li>
                <li class="navList"><a href="#"> Для мальчиков</a>
                    <div id="navList__forBoy" class="navList__div">
                        <ul class="ul__navList">
                            <li class="navListItem"><a href="category/boy/blouse/boyBlouse.html">Кофты/Жилетки</a></li>
                            <li class="navListItem"><a href="category/boy/pants/boyPants.html">Штаны/Шорты</a></li>
                            <li class="navListItem"><a href="category/boy/cap/boyCap.html">Головные уборы</a></li>
                            <li class="navListItem"><a href="category/boy/shirt/boyShirt.html">Рубашки</a></li>
                            <li class="navListItem"><a href="category/boy/t-shirt/boyT_shirt.html">Футболки</a></li>
                        </ul>
                        <ul class="ul__navList">
                            <li class="navListItem"><a href="category/boy/shoes/boyShoes.html">Обувь</a></li>
                            <li class="navListItem"><a href="category/boy/pullover/boyPullover.html">Гольфы/Свитера</a></li>
                            <li class="navListItem"><a href="category/boy/jackett/boyJackket.html">Курточки/Комбинезоны</a></li>
                            <li class="navListItem"><a href="category/boy/underwear/boyUnderwear.html">Белье</a></li>
                        </ul>
                    </div>
                </li>
                <li class="navList"><a href="#">Для девочек</a>
                    <div id="navList__forGirl" class="navList__div">
                        <ul class="ul__navList">
                            <li class="navListItem"><a href="category/girl/blouse/girlBlouse.html">Кофты/Жилетки</a></li>
                            <li class="navListItem"><a href="category/girl/pants/girlPants.html">Штаны/Шорты</a></li>
                            <li class="navListItem"><a href="category/girl/cap/girlCap.html">Головные уборы</a></li>
                            <li class="navListItem"><a href="category/girl/shirt/girlShirt.html">Блузки/Рубашки</a></li>
                            <li class="navListItem"><a href="category/girl/t-shirt/girlT_shirt.html">Футболки</a></li>
                        </ul>
                        <ul class="ul__navList">
                            <li class="navListItem"><a href="category/girl/shoes/girlShoes.html">Обувь</a></li>
                            <li class="navListItem"><a href="category/girl/pullover/girlPullover.html">Гольфы/Свитера</a></li>
                            <li class="navListItem"><a href="category/girl/jackett/girlJackket.html">Курточки/Комбинезоны</a></li>
                            <li class="navListItem"><a href="category/girl/underwear/girlUnderwear.html">Белье</a></li>
                        </ul>
                    </div>
                </li>
                <li class="navList"><a href="category/toy/toy.html">Игрушки</a>
                </li>
                <li class="navList"><a href="category/books/books.html">Книги</a></li>
            </ul>
            </nav>
        </div>
    
    
        <div id="contentWrapper" class="contentWrapper">
            <div id="left_content_column" class="content_column" >Случайные товары</div>
            <div id="rigth_content_column" class="content_column">
                <article id="filtr" style="display:none;" ></article>
                <div class="content">
                    <section class="category">
                        <a class="category_link" href="category/boy.html">
                            <img src="img/forBoy.jpg" alt="Одежда для мальчиков">
                        </a>
                        <h2 class="category_name"><a href="category/boy.html">Товары для мальчиков</a></h2>
                    </section>
                    <section class="category">
                        <a class="category_link" href="category/girl.html">
                            <img src="img/forGirl.jpg" alt="Одежда для девочек">
                        </a>
                        <h2 class="category_name"><a href="category/girl.html">Товары для девочек</a></h2>
                        </section>
                    <section class="category">
                        <a class="category_link" href="category/toy/toy.html">
                            <img src="img/toys.jpg" alt="Игрушки">
                        </a>
                        <h2 class="category_name"><a href="category/toy/toy.html">Игрушки</a></h2>
                    </section>
                    <section class="category">
                        <a class="category_link" href="category/books/books.html">
                            <img src="img/books.jpg" alt="Книги">
                        </a>
                        <h2 class="category_name"><a href="category/books/books.html">Книги</a></h2>
                    </section>
                  </div>
            </div>
        </div>
    
        <footer id="footer">Footer</footer>
    </div>
Код, который находится выше тега body:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>магазин</title>
     <link rel="stylesheet" href="style.css">
</head>
10
  • 1
    Вы бы хоть скриншот приложили. А то непонятно, что такое "80% случаев"
    – Sublihim
    5 фев 2018 в 13:24
  • <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> body { background-color: blue; } <!-- language: lang-html --> <h1>Hello, World!</h1> <!-- end snippet --> Какая у вас версия браузера?
    – Kareist
    5 фев 2018 в 13:28
  • @Sublihim точно - не подумал. Добавил
    – Dmytro
    5 фев 2018 в 13:40
  • 1
    Посмотри мой ответ в этом вопросе ru.stackoverflow.com/questions/774933/…
    – Air
    5 фев 2018 в 13:42
  • А что это вы говорите, что "normalize.css отключен", когда видно по скрину, что не отключен и приоритет имеет?
    – Crantisz
    5 фев 2018 в 13:47

1 ответ 1

1

Скорее всего в стилях есть что-то в духе

#bodyWrapper {
  background: white;
}

Для определения элемента, который задаёт фон, надо выделить любой элемент на неустравающем фоне через Inspect Element и выполнить в консоли

for (var x=$0, pc=getComputedStyle(x).backgroundColor, c; x=x.parentElement; pc=c) if ((c=getComputedStyle(x).backgroundColor)!=pc) console.log(x)

На выведенных в консоль элементах надо посмотреть фон.

Возможно, кроме backgroundColor надо обратить внимание на background.

14
  • Нет там такого. И мой вопрос - не дубликат. Проблема немного отличается от той, на которую Вы дали ссылку. И скорее всего, решение моей проблемы, кроется в применении стилей непосредственно к тегу body, как об этом указал Air, в комментариях
    – Dmytro
    5 фев 2018 в 14:21
  • @Дмытрык, строчка не зачёркнута, значит её никто не переопределяет. Фон у какого-то вложенного элемента.
    – Qwertiy
    5 фев 2018 в 15:54
  • такой подход не дает ответа на основной вопрос: почему это происходит не всегда, а только лишь в ~80% случаях?
    – Dmytro
    5 фев 2018 в 16:33
  • @Дмытрык, на тех 20% страниц, где этот стиль есть, фон белый, а на 80% остальных - тот, который задан.
    – Qwertiy
    5 фев 2018 в 16:38
  • Нет, страниц на сайте не много. до 10 шт. При заходе на любую из них, в 20% случаях bacground-color к тегу body не применяется. На данный момент, после того как обернул все в доп. div, проблема перестала себя проявлять
    – Dmytro
    5 фев 2018 в 16:44

Ваш ответ

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

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