Problema con DTD

_cronos2 · #1 (**permalink**) 20/01/2011, 15:30

Estoy tratando de hacer un formulario de contacto, y tengo el div.container con el height al 100%. Sin declaración DTD funciona bien, pero con la XHTML 1 Transitional me limita el tamño del div hasta la parte de abajo del último elemento en su interior (creo que me he explicado un poco mal, si no se me entiende puedo pasar u screenshot). El código es este:

Código HTML:

Ver original<!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>
<title>Contacto</title>
<style type="text/css">
body {background:#000;}
.container {
 width:50%;
 /* Aquí está el problema */ 
 height:100%;
 background:#333; 
 color:#F63; 
 margin-left:25%; 
 border-radius:1.5em;
 -moz-border-radius:1.5em; 
 -webkit-border-radius:1.5em;
 font-family:Calibri; 
}
.title {font-size:3em; text-align:center;}
.text {font-size:1em; margin-left:1em;}
.input {margin-left:0.5em;}
.input:focus {border:0.1em solid #F60;}
</style>
</head>
<body>
<div class='container'>
 <div class='title'>Contacta con nosotros</div>
 <!-- etc. etc. -->
</div>
</body>
</html>

¿Cómo puedo solucionarlo?
Saludos (:

pqek · #2 (**permalink**) 21/01/2011, 10:06

Mmm si mal no entiendo lo que necesitas es cambiar el height 100%, por overflow hidden.

Si puedes colocar el screenshot sería de mucha ayuda.

Saludos

_cronos2 · #3 (**permalink**) 21/01/2011, 12:45

Aquí están los screenshots:
1.- Con DTD

2.- Sin DTD

Como puedes ver en la 1º la altura es mucho menor, pero sigue estando al 100% como en la 2º. Muchas gracias por contestar.
Saludos (:

pqek · #4 (**permalink**) 21/01/2011, 13:23

Mmmm veo..

Puedes probar colocando esto en tu css

html, body {
margin:0;
height:100%;
}

Si no te funciona de esta manera puedes intentar colocándole a la clase container position:absolute

Saludos

_cronos2 · #5 (**permalink**) 21/01/2011, 13:33

Muchas gracias! Al final lo solucioné así:

Código CSS:

Ver originalbody {
 background:#000;
 /* Quería un poco de margen XD */
 margin:1em;
}
html, body {height:100%}

Saludos y gracias de nuevo (:

pqek · #6 (**permalink**) 21/01/2011, 14:03

Qué bueno que lo hayas solucionado ;D

Saludos

sanxuan · #7 (**permalink**) 21/01/2011, 15:18

Personalmente prefiero la siguiente opción:

.container {
width:50%;
left:25%;
top:1em; /*El margen superior que quieras dejar*/
bottom:1em; /* El margen inferior que quieras dejar */
overflow: scroll; /* es necesario manejar el contenido que supere el alto de la página*/
height:auto;
position:absolute;
}

Tu método me da algunos problemas con los márgenes. El fin del contenedor me queda por debajo del borde inferior de la página.
De todas maneras sólo pretende ser una alternativa más.