Franja Blanca

Franja lateral con altura 100% sin contenido y con scroll si lo sobrepasa

by Martin Miranda

HTML

<div id="franja_blanca">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet ornare leo, ac efficitur metus egestas vitae. Duis porttitor neque tincidunt dolor hendrerit mollis. In quis tellus eleifend, imperdiet leo ac, rutrum urna. Nulla in ante at nulla accumsan porta. Ut consequat semper vulputate. Donec ut faucibus nulla, eget tincidunt nibh. In ultrices mattis urna quis finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ante orci, dignissim sed efficitur eu, volutpat sed lectus. Phasellus malesuada libero finibus lacus iaculis suscipit. Maecenas tempor ultrices lacus id ornare. Etiam blandit, massa vitae convallis auctor, velit felis condimentum ipsum, at pellentesque tellus nibh et diam. Praesent tincidunt nibh in felis ornare tristique. Nam tristique dapibus tristique. Nulla nec turpis facilisis, ultrices justo nec, lacinia dui.

Maecenas sodales tellus id elit consequat commodo. Phasellus dignissim tellus lorem, eget tincidunt magna ornare vitae. Vestibulum vulputate magna id libero sollicitudin luctus. Nullam varius cursus sapien sit amet auctor. Praesent sed suscipit leo. Sed vulputate vitae purus non aliquet. Mauris libero tellus, auctor vitae mollis in, porta eu ex. Proin rhoncus ullamcorper neque, id elementum nisi accumsan in. Etiam posuere justo ac mi tempus hendrerit. Nullam mattis ullamcorper libero et condimentum. Etiam vitae purus id magna vulputate imperdiet a a ligula. Duis scelerisque tristique ipsum id feugiat. Maecenas commodo felis dui, eu ultrices felis scelerisque sed. Cras tellus orci, molestie quis fermentum et, cursus eget risus. </p>   
</div>
<div id="footer">
</div>

CSS

body,html{
    margin:0 0;
    padding:0 0;
    width:100%;
    height:100%;
    background:url('http://curiosidades.batanga.com/sites/curiosidades.batanga.com/files/Comida-para-Marte-impresiones-3D-y-pizza-3.jpg');
    background-size:cover;
    overflow-y:scroll;
}
*{
    box-sizing:border-box;
}
#franja_blanca{
    width:20%;
    height:auto;
    min-height:100%;
    background-color:rgba(255,255,255,.6);
    margin-left:5%;
    padding:10px;
}
#footer{
    width:100%;
    height:80px;
    position:fixed;
    bottom:0;
    background-color:rgba(200,50,0,1);
}