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>