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
    el 13 dic. 2020 a las 15:39
  • 1
    Gracias crack @Benito-B ya edité mi pregunta 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
    – BetaM
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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