Skip to main content
Uso del Snippet
Origen Enlace

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>
      <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>

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.

* {
   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>
      <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>

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>
se eliminaron 169 caracteres en el cuerpo
Origen Enlace
Benito-B
  • 4.2k
  • 3
  • 14
  • 28

Este es mi HTML

<!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>
      <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>

Este es mi CSS

* {
   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;
}

Este es el enlace directo

* {
   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>
      <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>

Código Visual de mi Problema

 

Este es mi HTML

<!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>
      <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>

Este es mi CSS

* {
   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;
}

Este es el enlace directo

Código Visual de mi Problema

* {
   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>
      <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>
 

Origen Enlace

¿Porque me sobra un espacio entre la parte inferior de mi aside, main, y encima de mi footer?

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.

Este es mi HTML

<!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>
      <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>

Este es mi CSS

* {
   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;
}

Este es el enlace directo

Código Visual de mi Problema