1

Estoy aprendiendo HTML y CSS por mi cuenta, pero me queda una duda como hago para que el section y el aside se mantengan del mismo tamaño conforme vaya agregando mas articles dentro del section vaya que los tamaños (y colores de fondo) se mantengan igual.

    <section class="content">
        <article class="article" >
            <h2>Titulo del articulo</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquid esse perferendis voluptates eius iure reprehenderit mollitia quis quos repudiandae, asperiores adipisci in unde labore laudantium corrupti provident, cupiditate molestias?</p>
        </article>
        <article class="article" >
            <h2>Titulo del articulo</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquid esse perferendis voluptates eius iure reprehenderit mollitia quis quos repudiandae, asperiores adipisci in unde labore laudantium corrupti provident, cupiditate molestias?</p>
        </article>
        <article class="article" >
            <h2>Titulo del articulo</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquid esse perferendis voluptates eius iure reprehenderit mollitia quis quos repudiandae, asperiores adipisci in unde labore laudantium corrupti provident, cupiditate molestias?</p>
        </article>
        <article class="article" >
            <h2>Titulo del articulo</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquid esse perferendis voluptates eius iure reprehenderit mollitia quis quos repudiandae, asperiores adipisci in unde labore laudantium corrupti provident, cupiditate molestias?</p>
        </article>
        
    </section>

    <aside>
        <h2>Barra lateral</h2>
        <form>
            <input type="text">
            <input type="submit" value="Buscar">
        </form>
        <h3>Titulo aside</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores nam quibusdam modi, assumenda reiciendis perspiciatis. Soluta ut fuga maiores ipsam inventore, dolorum quis rerum rem sunt animi. Dolorem, fugit consectetur!</p>
    </aside>

CSS

PAGINA

3
  • Al elemento aside le tienes un width 20% - 20px por eso te queda ese espacio vacio. Y el height si le pones 100% te ocupa el 100% de la altura del elemento que la contiene
    – Suso
    Commented el 3 jun. 2022 a las 22:11
  • Edita tu pregunta y agrega el código como tal en lugar de usar screenshots, por favor.
    – DjCrazy
    Commented el 4 jun. 2022 a las 1:19
  • Gracias. @DjCrazy Cuando agrego el código no me deja guardar la pregunta me sale que es puro código, por eso agregue una screen. Commented el 4 jun. 2022 a las 13:53

1 respuesta 1

0

Intenté crear un diseño responsive, espero te sirva. Lo recomendable en los sitios es que aside ocupe todo el alto y se quede fijo, ya dentro de el puede meter ya sea un contenido que pueda o no abarcar el alto o incluso hacerle scroll.

Espero te sirva

* {
  margin: 0;
  padding: 0;
}

.content {
  float: left;
  width: 60%;
  background-color: lightgreen;
  height: auto !important;
  min-height: 100%;
  padding: 0 3.5em;
}

aside {
  right: 0;
  position: fixed;
  width: 20%;
  height: 100%;
  padding: 0 3.5em;
  background-color: lightcoral;
}

.article {
  color: #FFF;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: solid 1px lightcoral;
}

footer {
  height: 40px;
  color: #FFF;
  background-color: #000;
  text-align: center;
  line-height: 50px;
}
<section class="content">
  <article class="article">
    <h2>Titulo del articulo</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquid esse perferendis voluptates eius iure reprehenderit mollitia quis quos repudiandae, asperiores adipisci in unde labore laudantium corrupti provident, cupiditate molestias?</p>
  </article>
  <article class="article">
    <h2>Titulo del articulo</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquid esse perferendis voluptates eius iure reprehenderit mollitia quis quos repudiandae, asperiores adipisci in unde labore laudantium corrupti provident, cupiditate molestias?</p>
  </article>
</section>
<aside>
  <h2>Barra lateral</h2>
  <form>
    <input type="text">
    <input type="submit" value="Buscar">
  </form>
  <h3>Titulo aside</h3>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores nam quibusdam modi, assumenda reiciendis perspiciatis. Soluta ut fuga maiores ipsam inventore, dolorum quis rerum rem sunt animi. Dolorem, fugit consectetur!</p>
</aside>

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.