Foros del Web » Creando para Internet » CSS »

Alto y Ancho al 100% con margen

Estas en el tema de Alto y Ancho al 100% con margen en el foro de CSS en Foros del Web. Hola, estoy armando un HTML y siempre lo hice con tablas y núnca tuve problemas, hago HTML desde hace muchos años. Siempre que intento hacer ...
  #1 (permalink)  
Antiguo 11/05/2011, 18:46
 
Fecha de Ingreso: febrero-2005
Mensajes: 4
Antigüedad: 12 años, 10 meses
Puntos: 0
Alto y Ancho al 100% con margen

Hola,
estoy armando un HTML y siempre lo hice con tablas y núnca tuve problemas, hago HTML desde hace muchos años.
Siempre que intento hacer algo con DIV porque en todos lados veo que dice que no hay que usar Tablas que todo se hace con Div, lo intento y termino utilizando Tablas, ya que al cliente le importa que se vea como ellos quieren y rápido.

Pero igual sigo intentando al principio armar con DIVS

Lo que quiero es Armar un recuadro que ocupe toda la pantalla, que se adapte a la pantalla y que tenga un márgen, por ej. 4px
Intenté de todas formas con DIV y no se puede porque cuando le pongo 100% de Width y Height más el márgen, me ocupa más del total de la pantalla y queda fuera de la pantall.

Así que volví a la tabla, hice una tabla de 3x3 y lo del medio es el contenido y lo demás los márgenes
obviamente no es lo que se debe hacer.

Alguien me podría decir cual es la forma correcta de hacerlo?

Ahora le muestro el código con Tabla como lo hice:
Gracias!



Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<style type="text/css">
<!--



html,body
	{
	height:100%;
	overflow:hidden;
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin:0;
	line-height:16px;
	}
	
a:link, a:visited
	{
	text-decoration:none;
	color:#000000;
	}
	
a:hover
	{
	text-decoration:underline;
	}


.v { overflow:hidden; height:1px;}
#c1, #c7 { height:4px; }
#c4, #c5 { width:2px; }

.contenido
	{
	border:1px solid #000000;
	font-size:small;
	text-align:left;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	}
	
	
// -->

</style>

</head>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" id="c1"><div class="v">&nbsp;</div></td>
  </tr>
  <tr>
    <td id="c4">&nbsp;</td>
    <td class="contenido">&nbsp;</td>
    <td id="c5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" id="c7"><div class="v">&nbsp;</div></td>
  </tr>
</table>
</html>
  #2 (permalink)  
Antiguo 11/05/2011, 19:29
Avatar de elbuensaint  
Fecha de Ingreso: marzo-2009
Ubicación: Chiwas
Mensajes: 178
Antigüedad: 8 años, 8 meses
Puntos: 7
Respuesta: Alto y Ancho al 100% con margen

margen al body en el css:
Código CSS:
Ver original
  1. body {
  2. margin:10px;
  3. }
  4.  
  5. #contenido {
  6. width:100%;
  7. height:100%;
  8. }

solo cambia 10px por el margen que quieres darle... algo así quedaría, ya tu le agregas las demás propiedades

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<style type="text/css">
<!--



html,body
	{
	height:100%;
	overflow:hidden;
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin:10px;
	line-height:16px;
	}
	
a:link, a:visited
	{
	text-decoration:none;
	color:#000000;
	}
	
a:hover
	{
	text-decoration:underline;
	}

#contenido
	{
	width:100%;
        height:100%;
	}
	
	
// -->

</style>

</head>

<body>

<div id="contenido">esto es el contenido</div>

</body>
</html> 
  #3 (permalink)  
Antiguo 11/05/2011, 21:15
 
Fecha de Ingreso: febrero-2005
Mensajes: 4
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Alto y Ancho al 100% con margen

el problema con esto es lo que digo
está sobresaliendo fuera de la pantalla abajo y a la derecha

es como que hace el DIV al mismo ancho y alto de la pantalla al poner en 100%, pero al agregar el margen, sigue manteniendo el ancho y alto, entonces sobra de los lados.
  #4 (permalink)  
Antiguo 11/05/2011, 21:34
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 6 años, 7 meses
Puntos: 236
Respuesta: Alto y Ancho al 100% con margen

Hola!,
para que sea exacto en cualquier navegador siempre usa auto para distribuir el ancho o el alto al total de la página o de un elemento,
ejemplo:
Código CSS:
Ver original
  1. body{
  2.  width:auto;margin:auto
  3. }
saludos
  #5 (permalink)  
Antiguo 11/05/2011, 22:13
Avatar de elbuensaint  
Fecha de Ingreso: marzo-2009
Ubicación: Chiwas
Mensajes: 178
Antigüedad: 8 años, 8 meses
Puntos: 7
Respuesta: Alto y Ancho al 100% con margen

lo estaba probando y solo me genera scroll vertical, no sé si tenga algo que ver mi resolución (uso una netbook), lo puedes checar aquí:
http://www.nacion-libre.net/margen.html
pero horizontalmente no tengo problema...

por el momento no se me ocurre nada mas, pero si encuentro como hacerlo te digo ;)
  #6 (permalink)  
Antiguo 12/05/2011, 07:58
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 6 años, 8 meses
Puntos: 20
Respuesta: Alto y Ancho al 100% con margen

Angelfcm te dijo que el body debe llevar width y height en auto y tienes el height del body en 100%
ese es el scroll vertical que te genera.
__________________
Everybody Else It's Doing It, So Why Can't We?
  #7 (permalink)  
Antiguo 12/05/2011, 13:16
Avatar de elbuensaint  
Fecha de Ingreso: marzo-2009
Ubicación: Chiwas
Mensajes: 178
Antigüedad: 8 años, 8 meses
Puntos: 7
Respuesta: Alto y Ancho al 100% con margen

de hecho angelfcm solo puso que width y margin deben ir en auto, pero es cierto, con height en auto ya no genera scroll, ni horizontal ni vertical y respeta el margen que le des al body
Código HTML:
<html>
<head>
<style>
body {
margin:10px;
height:auto;
background:#000000;
}
#contenido {
width:100%;
height:100%;
background:#ff0000;
}
</style>
<title></title>
</head>
<body>
<div id="contenido">
este es el contenido
</div>
</body>
</html> 
espero que con esto se solucione el problema de chelovip
  #8 (permalink)  
Antiguo 12/05/2011, 15:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Alto y Ancho al 100% con margen

Cita:
Iniciado por elbuensaint Ver Mensaje
de hecho angelfcm solo puso que width y margin deben ir en auto, pero es cierto, con height en auto ya no genera scroll, ni horizontal ni vertical y respeta el margen que le des al body
Código HTML:
<html>
<head>
<style>
body {
margin:10px;
height:auto;
background:#000000;
}
#contenido {
width:100%;
height:100%;
background:#ff0000;
}
</style>
<title></title>
</head>
<body>
<div id="contenido">
este es el contenido
</div>
</body>
</html> 
espero que con esto se solucione el problema de chelovip
has probado validar ese código? si al body no le colocas height 100% el div principal o contenedor de tu sitio no puede tomar el 100% de altura de la ventana, en tu caso si lo hace pero estas dejando que los navegadores trabajen en modo quirs al no aplicar un doctype valido y como todos sabemos eso es lo peor que se puede hacer.

a mi punto de vista lo que desea el compañero NO es viable mediante CSS ya que el 100% siempre es el de la ventana y con cualquier doctype el div tomara el 100% de la altura + el margen + el paddin con lo que ya nos estará generando el scroll

quizás buscando un poco podríamos encontrar una solución mediante javascript pero en CSS no lo veo viable
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 12/05/2011, 18:17
Avatar de elbuensaint  
Fecha de Ingreso: marzo-2009
Ubicación: Chiwas
Mensajes: 178
Antigüedad: 8 años, 8 meses
Puntos: 7
Respuesta: Alto y Ancho al 100% con margen

la verdad no me preocupé por la validación (pero si pensé que el código no sería válido...), pero bueh, coincido con lo que dices de que solo con css no es viable...

lo que se me ocurre es que por medio de javascript se obtenga la resolución del usuario y dependiendo de cual sea, se modifique el ancho y alto del div contenedor para que ocupe el espacio que se desea (el 100% - el margen), aunque hay que tener en cuenta que no todos los navegadores dan el mismo espacio útil para tu web, además de que algunas personas pueden usar toolbars (ni se diga de usuarios de ie...)

a ver si se dan mas ideas hasta dar con la solución mas viable y fácil de implementar, supongo que mas de uno le servirá
  #10 (permalink)  
Antiguo 12/05/2011, 18:28
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 6 años, 7 meses
Puntos: 236
Respuesta: Alto y Ancho al 100% con margen

Hola!,
Usando margin:0, padding:0px, width:auto y height:auto en el body, siempre será al ancho y alto completo en el cuerpo de página. No es necesario usar scripts. Saludos

Etiquetas: 100, alto, ancho, margen
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 18:27.