Quiero exponeros un problema que me ha surgido hace unos días maqueando una web. El caso es que después de "googlear" y de hacer cientos de cambios, no logro hacer que un div mantenga el "height: 100%.
He probado muchas opciones y en algunas me acerco pero no consigo que el efecto sea el correcto.
Para no extenderme más, lo que necesito es que el div "contenido" ocupe el 100% del alto, es decir, que empiece debajo del div "slider" y llegue hasta justo encima del div "footer" (el cual se mantiene "pegado" en la parte inferior del la web); el problema que me he encontrado cuando casi lo he conseguido es que si hago más pequeño en alto el navegador, no aparece el scroll lateral para ver el contenido de ese div y ademas el fondo del body y el efecto de "viñeta" que hay aplicado sobre el, se cortan a cierta altura.
En fin, no se si me he explicado bien, o si habrá solución a esto, pero os agradecería muchísimo si en algún rato libre le echarais un vistazo y me pudierais dar una solución.
Os dejo una web, hecha en Flash y XML en la cual me estoy basando para hacer mi trabajo, deseo conseguir el mismo efecto al hacer más pequeño el navegador:
[URL="http://activeden.net/item/xml-business-portfolio-template-with-deep-linking/full_screen_preview/107087"]Ejemplo de web con el efecto deseado[/URL]
Os dejo el código HTML a continuación:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>MUMAPLANET</title> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/style.css" /> <link rel="stylesheet" href="css/orbit.css"> <link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" /> <script src="js/jquery-1.6.2.js" type="text/javascript"></script> <script src="js/scroll.js" type="text/javascript"></script> <script type="text/javascript" src="js/mosaic.1.0.1.js"></script> <script type="text/javascript"> jQuery(function($){ $('.fade').mosaic(); }); </script> <script src="js/jquery.orbit.js" type="text/javascript"></script> <!--[if IE]> <style type="text/css"> .timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } </style> <![endif]--> <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> </head> <body> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div id="logo"> <img src="images/logo.png"> </div> <ul id="menu"> <li><a href="#">INICIO</a></li> <li><a href="#">NOSOTROS</a> <ul> <li><a href="#">PRESENTACIÓN</a></li> <li><a href="#">SERVICIOS</a></li> <li><a href="#">NUESTRO EQUIPO</a></li> </ul> </li> <li><a href="#">TRABAJOS</a> <ul> <li><a href="#">GALERÍA DE FOTOS</a></li> <li><a href="#">OTROS TRABAJOS</a></li> </ul> </li> <li><a href="#">CONTACTO</a></li> </ul> </div> <div id="slider"> <div id="featured"> <img src="images/sliderhome/welcome2.jpg" alt="HTML Captions" /> <img src="images/sliderhome/welcome3.jpg" alt="and more features" /> </div> </div> <div id="contenido"> <div id="presentación"> <div class="mosaic-block fade"> <a href="http://buildinternet.com/project/mightyicons/" target="_blank" class="mosaic-overlay"> <div class="details"> <h4>Mighty Social Icons</h4> <p>By Build Internet</p> </div> </a> <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mightyicons.jpg"/></div> </div> </div> </div> <div id="footer"> <div id="footer_info"> </div> <div id="footer_social"> <p>Síguenos en Facebook</p> </div> </div> </div> </div> </body> </html>
Código:
Muchas gracias de antemano./***** 01. GENERAL *****/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-repeat: repeat;
background-image: url(../images/fondo.jpg);
-webkit-box-shadow: inset 0 0 200px 230px rgba(0,0,0,0.7);
-moz-box-shadow: inset 0 0 200px 230px rgba(0,0,0,0.7);
box-shadow: inset 0 0 200px 190px rgba(0,0,0,0.7);
}
#wrapper {
width: 960px;
height: 100%;
min-height: 100%;
margin: 0 auto;
border-color: #393529;
border-style: solid;
border-width: 1px;
}
#container {
width: 960px;
margin: 0 auto;
padding: 0 0 0 0;
float: none;
min-height: 100%;
height: 100%;
}
#cabecera {
/*padding-top: 30px;*/
background-color: #1f1f1f;
width: 960px;
height: 180px;
position: relative;
}
#logo {
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
/*background-image: url(../images/logo.png);*/
width: 300px;
height: 79px;
padding-top: 30px;
position: relative;
}
#slider {
width: 960px;
height: 340px;
background-image: url(../images/slider_bg.png);
z-index: -9999;
}
#contenido {
background-repeat: repeat-y;
width: 960px;
background-image: url(../images/contenido_bg.png);
position: relative;
}
#presentacion {
width: 960px;
}
#footer {
color: #444444;
text-align: left;
width: 960px;
height: 30px;
bottom: 0px;
position: fixed;
background-color: black;
overflow: auto;
z-index: 9999;
}
#footer_info {
color: #444444;
padding-bottom: 2px;
padding-top: 8px;
padding-left: 5px;
text-align: left;
width: 730px;
height: 20px;
bottom: 0px;
position: relative;
float: left;
}
#footer_social {
color: #444444;
padding-bottom: 2px;
padding-top: 8px;
padding-right: 5px;
text-align: right;
width: 200px;
height: 20px;
bottom: 0px;
position: relative;
float: right;
}
Saludos!
