Estaba intentando hacer una navbar desplegable pero al desplegarse no ocupa el 100% de la pantalla ya que la lista de dentro coge el 100% de la navbar no de la pantalla:
<nav>
<a href="../index.html">
<span class="main-text"><img src="../imgs/white-black-PNG.png" style="width: 55px">TITULO</span>
</a>
</button>
<div class="main-nav">
<ul id="menu">
<li>
<a href="inicio.html"><i class="fas fa-home"></i>Inicio</a>
</li>
<li>
<a href="games.html"><i class="fas fa-gamepad"></i>Games</a>
</li>
<li>
<a href="edits.html"><i class="fas fa-edit"></i>Edits</a>
</li>
<li>
<a href="random.html"><i class="fas fa-random"></i>Random</a>
</li>
<li>
<a href="about.html"><i class="fas fa-user"></i>About</a>
</li>
</ul>
<div id="hamburger" onclick="someFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
la navbar tiene las siguientes propiedades:
nav {
position: fixed;
width: 100%;
height: 80px;
top: 0;
z-index: 15;
}
Cuando la lista se despliega lo pongo 100% pero solo coge el 100% de la nav, es decir que sólo se alarga 80px. He probado en ponerle mucha height para que en cualquier pantalla se vea completo pero no puedo poner los elementos de forma proporcional, la uncia solución es adaptar la lista
--- EDIT ---
Las propiedades de la lista son las siguientes:
ul#menu {
position: fixed;
width: 100%;
height: 100%;
top: 80px;
left: 0;
margin: 0;
}
height: 80px;
es totalmente normal que el css respete ese height en los hijos si utilizas una medida relativa porcentual. ¿Cómo haces el despliegue del menú? ¿Qué clase le agregas? ¿Con qué código? Checa las unidades vw y vh relativas al ancho de las pantallas y por favor, aclara tu problema editando tu pregunta.