I have my mobile first page with a hamburger menu, but when opening it it is not shown in 100% of the screen, I have set the property to occupy the height of 100%
but apparently it does not apply it, I tried to use it anyway 100vh
, but from the In the same way, it does not occupy the entire height of the screen on mobile devices.
code used
mostrarNav = () => {
document.getElementsByClassName('header__navigation__hamburguer')[0].classList.toggle('active');
};
/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200&family=Lora:wght@500;700&family=Montserrat:wght@400;500;700&display=swap');
/* VARIABLES */
/* FUNCTIONS*/
/* GLOBAL RESETS */
* {
box-sizing: border-box;
//border : 1px solid palegreen;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
background-color: #181719;
height: 100vh;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
/* HEADING STYLES */
h1 {
color: #FFFFFF;
font-family: 'Crimson Pro', serif;
font-size: 1.4rem;
font-weight: 200;
}
h2 {
color: #FFFFFF;
font-family: 'Lora', serif;
font-size: 3.6rem;
font-weight: 500;
}
h3 {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
font-size: 1.2rem;
font-weight: 500;
}
h4 {
color: #FFFFFF;
font-family: 'Lora', serif;
font-size: 1.8rem;
font-weight: 700;
}
h5 {
color: #A9A9A9;
font-family: 'Montserrat', sans-serif;
font-size: 1.4rem;
font-weight: 500;
}
p {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
font-size: 1.4rem;
font-weight: 400;
}
.container {
margin: 0 auto;
max-width: 37.5rem;
width: 90%;
}
/* HEADER */
.header {
margin-bottom: 3.8rem;
padding-top: 1.9rem;
}
.header__menu__container {
align-items: center;
justify-content: space-between;
display: flex;
}
.header__menu__container h1 {
border: 1px solid #FFFFFF;
padding: 0.8rem;
text-transform: uppercase;
}
.header__navigation__hamburguer {
align-items: center;
cursor: pointer;
display: flex;
position: relative;
z-index: 1;
}
.header__navigation__hamburguer span {
background-color: #FFFFFF;
display: block;
height: 0.3rem;
margin-bottom: 0.3rem;
position: relative;
transition: all 0.5s ease-in-out;
width: 3rem;
z-index: 1;
}
.header__navigation__hamburguer__menu {
background-color: #181719;
clip-path: circle(40px at calc(50% + (37.5rem / 2) - (40px / 2)) calc(0% + 1.9rem + (40px / 2)));
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all 0.5s ease-in-out;
visibility: hidden;
width: 100%;
}
.header__navigation__hamburguer.active+.header__navigation__hamburguer__menu {
clip-path: circle(100%);
opacity: 1;
visibility: visible;
}
.header__navigation__hamburguer__menu__links {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.header__navigation__hamburguer__menu__link {
margin-bottom: 2rem;
}
.header__navigation__hamburguer__menu__link a {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
font-size: 1.8rem;
font-weight: 500;
border-bottom: 2px solid transparent;
color: #FFFFFF;
padding-bottom: 0.6rem;
}
.header__navigation__hamburguer__menu__link a:hover {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
font-size: 1.8rem;
font-weight: 700;
border-bottom: 2px solid white;
padding-bottom: 0.6rem;
transition: all 300ms ease-in-out;
}
.line {
fill: none;
stroke: #FFFFFF;
stroke-width: 6;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.line2 {
stroke-dasharray: 60 60;
stroke-width: 6;
}
.line3 {
stroke-dasharray: 60 207;
stroke-width: 6;
}
.active .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
.active .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 6;
}
.active .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6;
}
/* MAIN */
.main {
padding-bottom: 6.1rem;
}
.main__information__details {
margin-bottom: 2.5rem;
}
.main__information__details h2 {
margin-bottom: 2.5rem;
}
.main__information__details p {
margin-bottom: 2.5rem;
max-width: 25rem;
}
.main__information__details__button {
display: inline-block;
}
.main__information__details__button a {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
font-size: 1.4rem;
font-weight: 700;
align-items: center;
display: flex;
}
.main__information__details__button a span {
margin-left: 1.5rem;
}
.main__information__product {
display: grid;
grid-template-columns: repeat(13, 1fr);
}
.main__information__product__image {
grid-column: 1/-1;
grid-row: 1;
}
.main__information__product__image img {
width: 100%;
}
.main__information__product__box {
margin-top: -20%;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
background: #181719;
width: 100%;
grid-column: 3/13;
padding: 1.317rem 0 2.5rem 1.9rem;
}
.main__information__product__person {
align-items: center;
display: flex;
margin-bottom: 1.824rem;
}
.main__information__product__person img {
height: 3.6rem;
width: 3.6rem;
border-radius: 50%;
margin-right: 1.39rem;
}
.main__information__product__person__details h3 {
margin-bottom: 0.585rem;
}
.main__information__product__person__details p {
color: #828282;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 500;
}
.main__information__product h4 {
max-width: 21rem;
width: 100%;
}
<header class="header">
<div class="header__container container">
<div class="header__menu__container">
<h1>This Interior</h1>
<div class="header__navigation">
<div class="header__navigation__hamburguer " onclick="mostrarNav()">
<svg width="40" height="40" viewBox="0 0 100 100">
<path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"/>
<path class="line line2" d="M 20,50 H 80"/>
<path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"/>
</svg>
</div>
<nav class="header__navigation__hamburguer__menu">
<ul class="header__navigation__hamburguer__menu__links">
<li class="header__navigation__hamburguer__menu__link">
<a class="link-social" href="#">Home</a>
</li>
<li class="header__navigation__hamburguer__menu__link">
<a class="link-social" href="#">Collection</a>
</li>
<li class="header__navigation__hamburguer__menu__link">
<a class="link-social" href="#">About</a>
</li>
<li class="header__navigation__hamburguer__menu__link">
<a class="link-social" href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<main class="main">
<div class="main__information container">
<div class="main__information__details">
<h2>Modern Interior</h2>
<p>A full-Service residential & commercial interior design and staging company offering professional organizing & eco-services.</p>
<div class="main__information__details__button">
<a href="#">Read more <span class="material-icons">trending_flat</span></a>
</div>
</div>
<div class="main__information__product">
<figure class="main__information__product__image">
<img src="https://picsum.photos/1000/700" alt="">
</figure>
<div class="main__information__product__box">
<div class="main__information__product__person">
<img src="https://picsum.photos/36/36" alt="">
<div class="main__information__product__person__details">
<h3>Aliza Webber</h3>
<p>Interior designer</p>
</div>
</div>
<h4>Designed in 2020 by Aliza Webber</h4>
</div>
</div>
</div>
</main>
There is an explanation for each case.
"height equals
100vh
" case:The unit
vh
refers to the "viewport height" , which if there were to be a vertical scroll, it would be less than the total height of the document."height equals
100%
" case:When it is indicated that an element is positioned in a way
absolute
and it is indicated that the height is equal to100%
, and there is no ancestor with position , the "container"absolute, relative o 'fixed
is taken as .viewport
If you want the to
100%
be the equivalent of a specific ancestor element , you simply have to indicate that said element is positioned in the formabsolute, relative o 'fixed
. This is how the descendant element covers100%
the ancestor element.That is, if we indicate that:
body
hasposition: relative;
header__navigation__hamburguer__menu
hasposition: absolute; height: 100%;
Let's get the menu to completely cover the entire page.
demonstration:
Lo malo de esta estrategia es al existir scroll, también vamos a tener que hacer scroll para llegar a las opciones del menú.
Si quisiéramos evitar tener que hacer scroll, entonces lo que podríamos hacer es que cuando se abre el menú, el
body
no tenga scroll.Ejemplo: