Como el titulo lo indica,
Tengo un div que cumple la funciones de capa cobertura donde hay una imagen PNG con transparencia que da una textura a las imagenes del Background Slide.
El problema es que como este div usa el ancho y alto para abarcar todo en FIXED el contenido de la pagina si pasa el alto no me deja bajar.
Hay alguna solucion? Ya sea dejando el fixed o quitandolo pero que la capa no se corte en el bottom. Si quito position Fixed el alto no cubre la totalidad. Si bajo el scroll hay un margen bottom que queda sin curbir.
a continuacion el HTML:
Código HTML:
<html>
<head>
body {
font-family: Cookies, Verdana, Tahoma, Geneva, sans-serif;
font-size:100%;
color: #c1c1c1;
background:red;
}
.contenedor {
background: transparent url(http://vegas.jaysalvat.com/js/vegas/overlays/01.png);
height:100%;
width:100%;
margin:0;
}
#top {
width: 100%;
height: 60px;
margin: 0;
background: #0A0A0A;
text-align: center;
}
.banner {
width: 700px;
margin: 0px auto;
padding: 0 70px;
text-align: left;}
* {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu {
float: right;
list-style: none;
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
display: block;
}
.menu li{
list-style: none;
float: left;}
.menu li a{
color: #EEE;
margin: 0 10px;
text-decoration: none;
font-weight: bold;
line-height: 60px;
}
</style>
</head>
<body>
<div id="top">
<div class="banner ">
<div style="float:left;">LOGO</div>
<div style="float:right;">
<ul class="menu">
<li><a href="#">Link a </a></li>
<li><a href="#">Link a </a></li>
<li><a href="#">Link a </a></li>
</ul>
</div>
</div>
</div>
<div class="contenedor" style="margin: 0px; padding: 0px; position:fixed;left: 0px; top: 0px; width: 100%; height: 100%;">
<div style="margin:30px auto;width:700px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lobortis mi. Donec at lobortis urna. Proin eu ornare tortor. Aliquam id nunc id turpis dapibus sagittis. Nam malesuada vestibulum lacus, vitae tristique orci tincidunt sit amet. Curabitur in est at risus sodales blandit at quis mauris. Sed eu lectus ante. Integer vitae purus massa. Suspendisse mollis, risus in ultrices ultricies, mi magna volutpat nulla, nec feugiat libero massa sed nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel augue in lorem feugiat vulputate. Etiam erat tortor, auctor malesuada tempus ac, accumsan vel turpis. Phasellus mollis metus quis leo ornare dictum. Curabitur nisl ante, accumsan egestas molestie non, semper sed mauris.
Sed ac leo vel ante pellentesque facilisis. Curabitur vitae placerat velit. Praesent nibh nulla, euismod nec condimentum scelerisque, sollicitudin mollis turpis. Curabitur scelerisque, lectus et aliquet pretium, urna metus ultrices diam, iaculis vulputate arcu lectus ac felis. Nullam scelerisque nisl at metus dapibus ac egestas turpis varius. Ut diam lacus, pharetra in malesuada ac, ultrices vel tellus. Proin facilisis sollicitudin lectus, vel consequat neque posuere sed. Fusce vitae mi id elit interdum suscipit ac id enim. Etiam bibendum cursus nisl, eu semper diam aliquet quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam condimentum tristique egestas. Donec odio justo, sodales et semper id, ultricies vel purus. Vestibulum vulputate dui ut nunc porttitor et malesuada lorem accumsan.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Etiam tincidunt orci eget dui tempus vehicula. Aliquam et turpis arcu, et ornare diam. In luctus orci vitae velit euismod quis fermentum urna rutrum. Vestibulum imperdiet, ante in facilisis sollicitudin, eros erat lobortis leo, pellentesque interdum libero metus non nibh. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ante mauris, molestie eu sodales eget, volutpat ut justo.
Nulla facilisi. Vivamus adipiscing quam id diam lobortis a rutrum nunc laoreet. Nunc lacus quam, varius sed pulvinar vel, semper ut odio. Nunc ut dui libero, ac malesuada turpis. Integer euismod posuere nulla, quis dignissim augue laoreet et. Proin at nisl nisi, eu venenatis augue. Proin massa erat, congue eget sollicitudin a, ullamcorper eget dolor. Quisque consectetur, magna auctor adipiscing accumsan, quam odio bibendum ligula, a pharetra neque nunc nec nisi. Proin non justo nec massa adipiscing dictum mollis vel quam. Phasellus feugiat gravida sodales. Integer luctus scelerisque posuere. Nulla dignissim dolor in purus tristique hendrerit. Sed vitae lectus dui, eu lobortis diam. Vestibulum rhoncus lorem nec metus aliquet tempor. Cras fermentum porta leo eget blandit.
Nam lobortis tristique lacus eu gravida. Mauris luctus diam iaculis justo ullamcorper aliquam. Suspendisse potenti. Vivamus lacinia turpis at sapien mollis eu pulvinar nisi euismod. Aliquam eget elit et nisl faucibus vestibulum ac ac ante. Vivamus sit amet turpis odio. Proin scelerisque, turpis nec lobortis vehicula, justo lorem hendrerit est, nec venenatis erat sapien ac augue. Proin mi leo, posuere nec posuere a, varius vitae mauris
Nam lobortis tristique lacus eu gravida. Mauris luctus diam iaculis justo ullamcorper aliquam. Suspendisse potenti. Vivamus lacinia turpis at sapien mollis eu pulvinar nisi euismod. Aliquam eget elit et nisl faucibus vestibulum ac ac ante. Vivamus sit amet turpis odio. Proin scelerisque, turpis nec lobortis vehicula, justo lorem hendrerit est, nec venenatis erat sapien ac augue. Proin mi leo, posuere nec posuere a, varius vitae mauris.
Nam lobortis tristique lacus eu gravida. Mauris luctus diam iaculis justo ullamcorper aliquam. Suspendisse potenti. Vivamus lacinia turpis at sapien mollis eu pulvinar nisi euismod. Aliquam eget elit et nisl faucibus vestibulum ac ac ante. Vivamus sit amet turpis odio. Proin scelerisque, turpis nec lobortis vehicula, justo lorem hendrerit est, nec venenatis erat sapien ac augue. Proin mi leo, posuere nec posuere a, varius vitae mauris.</p>
</div>
</div>
</body>
</html>