3

Tengo el siguiente problema, he realizado este ejercicio para practicar mis habilidades de front, lo estoy haciendo sin FlexBox ya que me es más fácil hacerlo así, pero necesito salir de mi zona de confort, el problema que tengo es que hay un espacio al final de mi aside y de mi main, justo encima de mi footer, desconozco el fallo por lo cual he decidido recurrir a los expertos que son ustedes. Adjunto mi HTML y CSS. Adjunto el código visual para que no se salgan de esta página. En el snippet sale el espacio inferior del footer, pero en la computadora en pantalla completa no sale, por lo que mi fallo sería solo encima del footer.

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}



a {
   text-decoration: none;
   color: white;
}

.header {
   height: 5vh;
   background-color: #222831;
   color: white;
}

.menu__logo {
   display: inline-block;
}

.menu__list {
   display: inline-block;
   list-style: none;
   position: absolute;
   right: 0;
}

.menu__list-item {
   display: inline-block;
}

.sidebar {
   width: 20%;
   height: 90vh;
   background-color: #ffd369;
   display: inline-block;
   position: relative;
}

.sidebar__box {
   height: 15%;
   border-radius: 10px;
   background-color: #222831;
   margin: 10px;
   width: 90%;
}

.content {
   display: inline-block;
   height: 90vh;
   width: 80%;
   position: absolute;
   background-color: #393e46;
}

.footer {
   height: 5vh;
   background-color: #222831;
   color: white;

}

.footer__menu__logo {
   display: inline-block;
}

.footer__menu__list {
   display: inline-block;
   position: absolute;
   right: 0;
}

.footer__menu__list-item {
   display: inline-block;
}
<!DOCTYPE html>
<html lang="es">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Desafio Layout 1</title>
   <link rel="stylesheet" href="./style.css">
</head>

<body>

   <header class="header">

      <nav class="menu">

         <h1 class="menu__logo">Logo</h1>

         <ul class="menu__list">
            <li class="menu__list-item"><a href="#">Home</a></li>
            <li class="menu__list-item"><a href="#">Cursos</a></li>
            <li class="menu__list-item"><a href="#">Instructores</a></li>
            <li class="menu__list-item"><a href="#">Blog</a></li>
         </ul>

      </nav>

   </header>

   <aside class="sidebar">

      <div class="sidebar__box"></div>
      <div class="sidebar__box"></div>
      <div class="sidebar__box"></div>
      <div class="sidebar__box"></div>

   </aside>

   <main class="content">

      <h2>Este es el nuevo contenido</h2>

   </main>

   <footer class="footer">
      <nav class="footer__menu">

         <h1 class="footer__menu__logo">Logo</h1>

         <ul class="footer__menu__list">
            <li class="footer__menu__list-item"><a href="#">Facebook</a></li>
            <li class="footer__menu__list-item"><a href="#">Instagram</a></li>
            <li class="footer__menu__list-item"><a href="#">Twitter</a></li>
            <li class="footer__menu__list-item"><a href="#">LinkedIn</a></li>
         </ul>

      </nav>

   </footer>




</body>

</html>

3
  • En vez de usar el codepen, usa el snippet de SO... de esa manera nos evitamos andar saliendo de la página para poder ayudarte!
    – Benito-B
    Commented el 13 dic. 2020 a las 15:39
  • 1
    Gracias crack @Benito-B ya edité mi pregunta Commented el 13 dic. 2020 a las 15:43
  • ¿Y necesariamente debes estar posicionando todo de la forma en que lo haces? es que lo considero un tanto forzado
    – user128299
    Commented el 13 dic. 2020 a las 16:43

1 respuesta 1

2

Lo logré solucionar editando esta parte del aside y del main

.sidebar {
   width: 20%;
   height: 90vh;
   background-color: #ffd369;
   position: absolute;
}
.content {
   background-color: blueviolet;
   width: 80%;
   height: 90vh;
   position: relative;
   background-color: #393e46;
   color: #fff;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.