Web sin scroll

rapuig · #1 (**permalink**) 10/07/2011, 19:20

Hola a todos, mi consulta es la siguiente, estoy con una web pero quiero que se adapte a cualquier monitor, al menos a los mas comunes, es decir que nunca haya scroll puesto que la web no tiene mucho contenido. Debo trabajar con porcentajes en todos los divs?
Les muestro algo de lo que tengo hecho.
HTML

Código HTML:

<body>
<div id="wrapper">
   <div id="central">
      <div id="header"></div>
   <div id="contenido"></div>
   <div id="menu">
      <ul id="navi"> 
	<li>inicio</li>
	<li>últimos eventos</li>
	<li>somos distintos</li>
        <li>sociales</li>
        <li>servicios</li>
	<li>fotos</li>
        <li>empresariales</li>
        <li>contacto</li>
      </ul>
   </div>
</div>
<div id="logo">
   <div id="footer"></div>
</div>
</div>
</body>

CSS

Código:

body{
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	background-color: #423A39;
}
#wrapper{
	height:675px;
	width:1024px;
	margin-left:auto;
	margin-right:auto;		
	}

#central{		
	height:470px;
	width:887px;
	background-image:url(img/fondo.png);	
	float:left;
}
		
#logo{
	width:984px;
	height:225px;
	float:right;
	margin-right:40px;
	margin-top:-30px;
	background-image:url(img/logo.png);
	background-repeat: no-repeat;
	background-position: right;
}

#menu{
	width:198px;
	height:310px;
	padding-top:5px;
	margin-top:0px;
	background: rgba(66, 58, 57, 0.60);
}
	
#navi {  
	list-style:none;
	margin-top:40px;
	
	margin-right:30px;
	padding:0;
	}
	
#navi li {
	margin-top:8px;
	padding:1px 10px 0px;
	color:#FFF;
	text-align:right;
	font-size:15px;
	font-family:Verdana, Geneva, sans-serif;
	background-color:#423A39;
	}
	
#navi li:hover{
	background-color:#8A7877;
}

#header{
	width:400px;
	height:60px;
	margin-left:447px;
	margin-top:1px;
}

#footer{
	width:250px;
	height:120px;
	margin-top:105px;
	margin-left:260px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	}
	
#contenido{
	width:610px;
	height:auto;
	float:right;
	margin-right:40px;
	background: rgba(66, 58, 57, 0.30);
}

Muchas gracias!

daPhyre · #2 (**permalink**) 11/07/2011, 13:57

Si no deseas que tenga scroll.. ¿Qué apariencia deseas que tenga? ¿Buscas un 100% x 100% o un recuadro pequeño centrado? ¿Estás tomando en cuenta dispositivos móviles para lo que deseas?

rapuig · #3 (**permalink**) 11/07/2011, 14:32

Gracias por contestar daPhyre.
Para dispositivos móviles no me interesa. Lo que yo quiero es que el ancho sea una medida fija y este centrado, que eso ya lo logre, pero la altura quiero que siempre sea el 100% del explorador, es decir, sin scroll vertical, si estoy en pantalla completa (F11) se ajuste al 100% de la pantalla, y sino lo estoy también.
Muchas gracias! Espero que quede claro. ;)

daPhyre · #4 (**permalink**) 11/07/2011, 14:51

Prueba un min-height:100%, eso hará que siempre tenga el 100x, y si el contenido realmente es poco, nunca debería de mostrarse scroll.

mayid · #5 (**permalink**) 11/07/2011, 15:05

Yo diría que busques la tecnica del height: 100%

Si no, anulá directamente el scroll (en el caso de que estes seguro de que nunca sería necesario):

overflow: hidden

rapuig · #6 (**permalink**) 11/07/2011, 15:31

Muchas gracias!!
Lo solucione dandole al html y body height:100% y al contenedor central lo mismo.
Saludos