Foros del Web » Creando para Internet » CSS »

Web sin scroll

Estas en el tema de Web sin scroll en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/07/2011, 19:20
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 11 meses
Puntos: 13
Pregunta Web sin scroll

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!
  #2 (permalink)  
Antiguo 11/07/2011, 13:57
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 2 meses
Puntos: 142
Respuesta: Web sin scroll

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?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 11/07/2011, 14:32
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 11 meses
Puntos: 13
Respuesta: Web sin scroll

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. ;)
  #4 (permalink)  
Antiguo 11/07/2011, 14:51
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 2 meses
Puntos: 142
Respuesta: Web sin scroll

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.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 11/07/2011, 15:05
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 2 meses
Puntos: 101
Respuesta: Web sin scroll

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
  #6 (permalink)  
Antiguo 11/07/2011, 15:31
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 11 meses
Puntos: 13
Respuesta: Web sin scroll

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

Etiquetas: contenido, fondo, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:01.