Alto y Ancho al 100% con margen

chelovip · #1 (**permalink**) 11/05/2011, 17:46

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>

elbuensaint · #2 (**permalink**) 11/05/2011, 18:29

margen al body en el css:

Código CSS:

Ver originalbody {
margin:10px;
}
 
#contenido {
width:100%;
height:100%;
}

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>

chelovip · #3 (**permalink**) 11/05/2011, 20:15

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.

angelfcm · #4 (**permalink**) 11/05/2011, 20:34

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 originalbody{
 width:auto;margin:auto
}

saludos

elbuensaint · #5 (**permalink**) 11/05/2011, 21:13

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 ;)

yonaida · #6 (**permalink**) 12/05/2011, 06:58

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.

elbuensaint · #7 (**permalink**) 12/05/2011, 12:16

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

ArturoGallegos · #8 (**permalink**) 12/05/2011, 14:48

Cita:

Iniciado por elbuensaint

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

elbuensaint · #9 (**permalink**) 12/05/2011, 17:17

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á

angelfcm · #10 (**permalink**) 12/05/2011, 17:28

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