У меня есть сайт, который работает на планшетах, компьютерах и телефонах во всем, кроме Chrome.Основной элемент div должен заполнять высоту экрана независимо от того, заполнен он или нет.Имеет нейтрально-серый цвет фона.В Chrome он заполняет только размер области просмотра, при прокрутке или изменении размера области просмотра цвет фона не адаптируется.Я перепробовал все, что мог придумать и протестировал на Safari, Firefox и Edge без проблем, что случилось с Chrome?
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<link rel='stylesheet' href='owstyles.css'/>
<title>
Layout experiment
</title>
</head>
<body>
<div id="holder">
<div id="header">
<div class="head-item">my logo here</div>
<div class="head-item">other head item</div>
</div><!--close header-->
<div id="main">
<h1>My Heading 1</h1>
<h2>my heading 2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
<h2>heading 2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
</div> <!--close main-->
</div><!--close holder-->
</body>
</html>
А вот CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body{
background-color: #EAEDF0;
height: 100%;
background-size: 100%;
background-image: url('graphic/background.jpg');
background-attachment: fixed;
background-size: cover;
}
h1 {
margin-left: 1em;
margin-bottom: 0.5em;
}
h2 {
margin-left: 1em;
}
p {
margin: 0 1em 1em 1em;
}
#holder {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-start;
justify-content: flex-start;
color: #ffffff;
height:100%;
max-width: 960px;
margin: auto;
}
#header {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
height: auto;
padding-bottom: 2.5em;
background-image: url(graphic/waves.jpg);
-webkit-justify-content: space-between;
justify-content: space-between;
align-items: center;
}
#main {
display: -webkit-flex;
display: flex;
flex-direction: column;
color: #000000;
-webkit-flex: 1;
flex: 1;
height: 100%;
background-color: #EAEDF0;
max-width: 960px;
}
#footer {
display: -webkit-flex;
display: flex;
background-color: #00ff00;
height:auto;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
align-items: center;
width: 100%;
max-width: 960px;
position: fixed;
bottom: 0em;
color: #ffffff;
background-image:url('graphic/waves.jpg');
}
.head-item {
display: flex;
margin: 2vw;
height: 2vw;
}
Этотакже живите по адресу www.oceanwind.ch / test