Skip to main content
Se agrega snippet para visualizar el resultado.
Origen Enlace
DjCrazy
  • 7.1k
  • 3
  • 18
  • 42

Intenté crear un diseño responsive, espero te sirva. Lo recomendable en los sitios es que asideaside 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.

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

</style>

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

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

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.

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

</style>

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

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.

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

Origen Enlace
EvilFearzZ
  • 1.1k
  • 1
  • 5
  • 11

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

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

</style>

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