Вот сайт: http://cn01371.tmweb.ru, когда открываю с телефона, высота страницы увеличивается , из-за текста. Но div элемент c классом "global" ,который содержит в себе и "header" , и "main" не растягивается на новый размер страницы. Как можно сделать чтобы "div" растягивался на всю ширину и высоту страницы?
body{
background-image: url(/image/m_cyberpunk.jpg);
background-size: cover;
color: white;
font-family: 'Montserrat Alternates', sans-serif;
}
.global{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
display:grid;
grid-template-areas: 'part1 part2';
background-color: rgba(0, 0, 0, 0.5);
}
header{grid-area:part1;}
p{
margin-bottom:10px;
margin-top: 10px;
}
main{
margin:auto;
}
/***************************************desktop menu***************************************/
.header{text-align:center;}
.desktop-menu{
overflow: auto;
height:610px;
width: 300px;
margin-left: 25px;
}
.wo{padding:0;}
.nav-li{
list-style-type: none;
height: 30px;
line-height: 30px;
text-align:center;
margin-bottom:20px;
}
.relate{
display: block;
text-decoration: none;
color:white;
border: 4px solid white;
}
.relate-active{
border: 4px solid rgb(0, 140, 255);
box-shadow: 0px 0px 70px rgb(0, 140, 255);
color: rgb(0, 140, 255);
}
.relate:hover{
border: 4px solid rgb(0, 140, 255);
box-shadow: 0px 0px 70px rgb(0, 140, 255);
color: rgb(0, 140, 255);
}
/****************************************mobile menu****************************************/
.mobile-menu{
display:none;
overflow: auto;
}
.mobile-menu-line{
display: block;
position: absolute;
height:5px;
width:35px;
background-color:black;
right:10%;
top:20px;
}
.mobile-menu-line::before, .mobile-menu-line::after{
content: '';
display:block;
position: absolute;
height:5px;
width:35px;
background-color:black;
}
.mobile-menu-line::before{
transition-duration: 1s;
top:-10px;
}
.mobile-menu-line::after{
transition-duration: 1s;
top:10px;
}
.mobile-menu-btn{
margin-left:20px;
width:50px;
height:50px;
position: relative;
background-color: green;
cursor:pointer;
box-shadow: 0px 0px 70px green;
align-self: center;
}
.mobile-menu-btn-active{
margin-left:20px;
grid-area: btn;
align-self: center;
background-color: red;
transition: background-color 1s linear;
box-shadow: 0px 0px 70px red;
}
.mobile-menu-line-active::before{
transition-duration:1s;
top:0px;
}
.mobile-menu-line-active::after{
transition-duration:1s;
top:0px;
}
.header-mobile{
grid-area: h2;
align-self: center;
}
.mobile-menu-line-active{
transition-duration:1.5s;
background-color: green;
}
.mobile-menu-wrapper{
height: 100%;
display:grid;
grid-template-areas: 'h2 btn'
'menu menu' ;
left:-310px;
transition: left 1s linear;
width:310px;
background-color: rgba(204, 0, 255, 0.1);
}
.mobile-menu-wrapper-active{
display:grid;
grid-template-areas: 'h2 btn'
'menu menu' ;
}
/******************************** media for nav ********************************/
@media(max-width:800px){
.desktop-menu{
display:none;
}
.mobile-menu{
display:inline;
}
main{
position: absolute;
left:0px;
}
.mobile-menu-wrapper{
position: absolute;
left:-240px;
transition: left 1s ease;
}
.mobile-menu-wrapper-active{
left:0px;
}
.nav-li-mobile{
width:200px ;
margin-bottom:5px;
}
main{
margin-left:20px;
}
}
/**************************************content**************************************/
.tabs__pane {display:none;}
.tabs__pane_show {
display: block;
}
.tabs__content{
display:flex;
text-align: center;
justify-content: center;
line-height: 15px;
left:100px;
transition: left 0.5s linear;
}
/*content for mobile*/
.tabs__content-active{
left:300px;
}
<div class="global">
<header></header>
<main class="tabs__content"></main>
</div>
.global
у вас прописаноposition: absolute;
, А кто родитель? Если body, то где в нёмposition: relative;
?position:relative;
для body, но не стал здесь исправлять, потому что это всё равно не помогло.z-index
кposition:absolute
и посмотрел результат в safari, chrome , opera - всё равно не работает. Так более того, сposition:relative
тёмный фон вообще пропадает ,но еслиposition:relative
убрать то фон заполняет весь экран, но не в том случае ,если размер страницы меняется.