Problema con el height:100%
** EL PROBLEMA SURGE CON DOCTYPE HTML 4.01 transitional, o posterior. Pero es que quiero hacer una página "correcta"
Intento hacer esto:
http://img502.imageshack.us/img502/8917/problemyy1.png
Mi principal objetivo, es que la capa "DIV", tenga el alto de la celda que la contiene (height:100%), pero no se lo traga, porque dicha celda, varía su alto en función del tamaño y resolución del navegador del usuario.
** problema secundario, es que en IE, ni siquiera se traga los altos de las celdas 1 y 3 (height:30px y 15px, respectivamente) Esto, en FireFox no es problema, pues respeta los altos en "pixeles".
¿Cómo hago para que la capa "div" inunde la celda que la contiene?
El problema podría ser extensible a una imagen, o a un IFRAME, no sólo a un "div"
>> Éste es el código completo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><style type="text/css">
<html>
<head><style>body {height:100%;}</style></head>
<body>
<div style="height:100%; position: absolute; top:0px; left:0px;">
<table style="height:100%;" border="1">
<tr><td style="height:30px;">1</td></tr>
<tr><td><div style="border:blue 1px solid; height:100%;">DIV</div></td></tr>
<tr><td style="height:15px;">3</td></tr>
</table>
</div>
</body>
</html>
Gracias
Rizome
2007
Intento hacer esto:
http://img502.imageshack.us/img502/8917/problemyy1.png
Mi principal objetivo, es que la capa "DIV", tenga el alto de la celda que la contiene (height:100%), pero no se lo traga, porque dicha celda, varía su alto en función del tamaño y resolución del navegador del usuario.
** problema secundario, es que en IE, ni siquiera se traga los altos de las celdas 1 y 3 (height:30px y 15px, respectivamente) Esto, en FireFox no es problema, pues respeta los altos en "pixeles".
¿Cómo hago para que la capa "div" inunde la celda que la contiene?
El problema podría ser extensible a una imagen, o a un IFRAME, no sólo a un "div"
>> Éste es el código completo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><style type="text/css">
<html>
<head><style>body {height:100%;}</style></head>
<body>
<div style="height:100%; position: absolute; top:0px; left:0px;">
<table style="height:100%;" border="1">
<tr><td style="height:30px;">1</td></tr>
<tr><td><div style="border:blue 1px solid; height:100%;">DIV</div></td></tr>
<tr><td style="height:15px;">3</td></tr>
</table>
</div>
</body>
</html>
Gracias
Rizome
2007
1 Respuesta
Respuesta de llobu
1
Te sobra el <style type="text/css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>body {height:100%;}</style>
</head>
<body>
<div style="height:100%; position: absolute; top:0px; left:0px;">
<table style="height:100%;" border="1">
<tr><td style="height:30px;">1</td></tr>
<tr><td><div style="border:blue 1px solid; height:100%;">DIV</div></td></tr>
<tr><td style="height:15px;">3</td></tr>
</table>
</div>
</body>
</html>
Recuerda siempre que una rabla res rígida, que las celdas verticales se ajustarán por consiguiente a la más grande por lo que si a una le pones width 30 y ota width 15, aparecerá la de treinta.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>body {height:100%;}</style>
</head>
<body>
<div style="height:100%; position: absolute; top:0px; left:0px;">
<table style="height:100%;" border="1">
<tr><td style="height:30px;">1</td></tr>
<tr><td><div style="border:blue 1px solid; height:100%;">DIV</div></td></tr>
<tr><td style="height:15px;">3</td></tr>
</table>
</div>
</body>
</html>
Recuerda siempre que una rabla res rígida, que las celdas verticales se ajustarán por consiguiente a la más grande por lo que si a una le pones width 30 y ota width 15, aparecerá la de treinta.
Bueno, gracias por la respuesta, antes de nada.
No... el "style type..." sólo era un poco de código innecesario... no tenía nada que ver con el fallo... (ya lo quité, y nada)
De todas maneras... ¿cómo qué en las tablas no puede tener cada fila un alto distinto?
Bueno...
Sigo con el mismo problema.
El DIV, no toma height:100%
¿Más ideas?
Att:
rizome
No... el "style type..." sólo era un poco de código innecesario... no tenía nada que ver con el fallo... (ya lo quité, y nada)
De todas maneras... ¿cómo qué en las tablas no puede tener cada fila un alto distinto?
Bueno...
Sigo con el mismo problema.
El DIV, no toma height:100%
¿Más ideas?
Att:
rizome
Aun no entiendo poruqé quieres usar el div de dentro.
Si quieres usar CSS para la accesibilidad y el posicionamient oen buscadores no hay que usar tablas, en el caso de que la quieras usar, pinta directamente el TD de esa tabla. En vez de meter un div dentro
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><style>body {height:100%;}</style></head>
<body>
<div style="height:100%; position: absolute; top:0px; left:0px;">
<table style="height:100%;" border="1">
<tr><td style="height:30px;">1</td></tr>
<tr><td style="border:blue 1px solid; height:100%;">DIV</td></tr>
<tr><td style="height:15px;">3</td></tr>
</table>
</div>
</body>
</html>
Si quieres usar CSS para la accesibilidad y el posicionamient oen buscadores no hay que usar tablas, en el caso de que la quieras usar, pinta directamente el TD de esa tabla. En vez de meter un div dentro
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><style>body {height:100%;}</style></head>
<body>
<div style="height:100%; position: absolute; top:0px; left:0px;">
<table style="height:100%;" border="1">
<tr><td style="height:30px;">1</td></tr>
<tr><td style="border:blue 1px solid; height:100%;">DIV</td></tr>
<tr><td style="height:15px;">3</td></tr>
</table>
</div>
</body>
</html>
- <td style="height:100%;"> -
Efectivamente, ESA HA SIDO LA SOLUCIÓN; gracias.
No se me ocurría, que pudiera funcionar dándole altura 100% también a la celda problemática.
En cuanto al uso de tablas...
Creo que es la única manera de poder ajustar dinámicamente en altura 100%, aunque el usuario redimensione la ventana de navegación.
¿No?
¿O se puede mediante divs, hacer:?
<div1 style="alto:fijo1">
<div2 style="alto:variable hasta llenar">
<div3 style="alto:fijo3">
Efectivamente, ESA HA SIDO LA SOLUCIÓN; gracias.
No se me ocurría, que pudiera funcionar dándole altura 100% también a la celda problemática.
En cuanto al uso de tablas...
Creo que es la única manera de poder ajustar dinámicamente en altura 100%, aunque el usuario redimensione la ventana de navegación.
¿No?
¿O se puede mediante divs, hacer:?
<div1 style="alto:fijo1">
<div2 style="alto:variable hasta llenar">
<div3 style="alto:fijo3">
Te dejo un layer de CSS puro que sea probablemente lo que necesitas
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left:200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Cabecera de Web</h1></div>
<div id="wrapper">
<div id="content">
<p><strong>Lorem ipsum</strong> te ubique saperet adolescens eam, harum dicam theophrastus mea ex. Est fabellas interesset ei, no odio hinc nam. Ut stet delenit sit. Putant omittantur intellegebat mea ex, vis in repudiandae voluptatibus, eu alii sint veniam eam. Ad dolor dolores eam, sea ipsum definiebas te. Ad sea quaeque impedit placerat, ei nec sint agam error. Eam dicta explicari ne, persius perfecto sensibus ut sed, sit velit movet praesent an.</p>
<p>Et his graece deserunt. Te nibh graeci indoctum duo. Agam mnesarchum eam id. Id nec debet zzril tempor, modus gubergren ea qui. Ut vix augue verterem.</p>
<p>Ne suas fastidii appetere qui, ea eos quidam bonorum liberavisse. No has quod offendit, accusam definiebas conclusionemque sed ad. Vix an semper suscipiantur, eu stet audiam disputando duo. Phaedrum petentium cum ei. Cum ea omnis illud liber.</p>
<p>Nam dictas vivendo patrioque ne, oblique dolorem corpora cu usu. Oratio invenire deterruisset has cu. Ei nec alia consul. Commodo interesset adversarium ne vel. Mei te senserit iracundia, fierent salutandi ex mel.</p>
</div>
</div>
<div id="navigation">
<p><strong>Lorem ipsum</strong> te ubique saperet adolescens eam, harum dicam theophrastus mea ex. Est fabellas interesset ei, no odio hinc nam. Ut stet delenit sit. Putant omittantur intellegebat mea ex, vis in repudiandae voluptatibus, eu alii sint veniam eam. Ad dolor dolores eam, sea ipsum definiebas te. Ad sea quaeque impedit placerat, ei nec sint agam error. Eam dicta explicari ne, persius perfecto sensibus ut sed, sit velit movet praesent an.</p>
</div>
<div id="extra">
<p><strong>Lorem ipsum</strong> te ubique saperet adolescens eam, harum dicam theophrastus mea ex. Est fabellas interesset ei, no odio hinc nam. Ut stet delenit sit. Putant omittantur intellegebat mea ex, vis in repudiandae voluptatibus, eu alii sint veniam eam. Ad dolor dolores eam, sea ipsum definiebas te. Ad sea quaeque impedit placerat, ei nec sint agam error. Eam dicta explicari ne, persius perfecto sensibus ut sed, sit velit movet praesent an.</p>
</div>
<div id="footer"><p>Aqui ira el pie de página</p></div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin-left:200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Cabecera de Web</h1></div>
<div id="wrapper">
<div id="content">
<p><strong>Lorem ipsum</strong> te ubique saperet adolescens eam, harum dicam theophrastus mea ex. Est fabellas interesset ei, no odio hinc nam. Ut stet delenit sit. Putant omittantur intellegebat mea ex, vis in repudiandae voluptatibus, eu alii sint veniam eam. Ad dolor dolores eam, sea ipsum definiebas te. Ad sea quaeque impedit placerat, ei nec sint agam error. Eam dicta explicari ne, persius perfecto sensibus ut sed, sit velit movet praesent an.</p>
<p>Et his graece deserunt. Te nibh graeci indoctum duo. Agam mnesarchum eam id. Id nec debet zzril tempor, modus gubergren ea qui. Ut vix augue verterem.</p>
<p>Ne suas fastidii appetere qui, ea eos quidam bonorum liberavisse. No has quod offendit, accusam definiebas conclusionemque sed ad. Vix an semper suscipiantur, eu stet audiam disputando duo. Phaedrum petentium cum ei. Cum ea omnis illud liber.</p>
<p>Nam dictas vivendo patrioque ne, oblique dolorem corpora cu usu. Oratio invenire deterruisset has cu. Ei nec alia consul. Commodo interesset adversarium ne vel. Mei te senserit iracundia, fierent salutandi ex mel.</p>
</div>
</div>
<div id="navigation">
<p><strong>Lorem ipsum</strong> te ubique saperet adolescens eam, harum dicam theophrastus mea ex. Est fabellas interesset ei, no odio hinc nam. Ut stet delenit sit. Putant omittantur intellegebat mea ex, vis in repudiandae voluptatibus, eu alii sint veniam eam. Ad dolor dolores eam, sea ipsum definiebas te. Ad sea quaeque impedit placerat, ei nec sint agam error. Eam dicta explicari ne, persius perfecto sensibus ut sed, sit velit movet praesent an.</p>
</div>
<div id="extra">
<p><strong>Lorem ipsum</strong> te ubique saperet adolescens eam, harum dicam theophrastus mea ex. Est fabellas interesset ei, no odio hinc nam. Ut stet delenit sit. Putant omittantur intellegebat mea ex, vis in repudiandae voluptatibus, eu alii sint veniam eam. Ad dolor dolores eam, sea ipsum definiebas te. Ad sea quaeque impedit placerat, ei nec sint agam error. Eam dicta explicari ne, persius perfecto sensibus ut sed, sit velit movet praesent an.</p>
</div>
<div id="footer"><p>Aqui ira el pie de página</p></div>
</div>
</body>
</html>
He estado analizando el modelo que me has propuesto, y está perfecto para ANCHOS.
Pero mi problema, está en ALTOS.
Al parecer, los "float" trabajan bien en ancho, pero en alto no. De esa manera, puedo apilar "divs" uno "al lado del otro", y poner "width:100%", y quedará siempre un conjunto de ancho total 100%
Pero en altura, no funciona.
En el mejor de los casos, cuando pones a un div "height:100%", lo que hace, es tomar la altura total del navegador, independientemente de si otros div ya tenían ocupada parte de esa altura total.
No se si me explico.
:(
Pero mi problema, está en ALTOS.
Al parecer, los "float" trabajan bien en ancho, pero en alto no. De esa manera, puedo apilar "divs" uno "al lado del otro", y poner "width:100%", y quedará siempre un conjunto de ancho total 100%
Pero en altura, no funciona.
En el mejor de los casos, cuando pones a un div "height:100%", lo que hace, es tomar la altura total del navegador, independientemente de si otros div ya tenían ocupada parte de esa altura total.
No se si me explico.
:(
Ya te di respuestas a todo lo que me estas pidiendo por cada parte, pero sigo sin saber que es lo que realmente quieres. Estoy haciendo códigos y dejando el tiempo en ellos en balde y ni tu consigues lo que quieres ni yo puedo ayudarte con tus objetivos
Te dejo unos enlaces para que sigas intentando lo que necesitas
http://www.sidar.org/recur/desdi/mcss/manual/indice.php
http://www.cssbasics.com/chapter_15_css_width_height.html
http://css.hazunaweb.com/217.php
Te dejo unos enlaces para que sigas intentando lo que necesitas
http://www.sidar.org/recur/desdi/mcss/manual/indice.php
http://www.cssbasics.com/chapter_15_css_width_height.html
http://css.hazunaweb.com/217.php
Cierto...
No me he dado cuenta, y he "abusado" demasiado de tu buena voluntad.
La respuesta que me diste:
<table style="height:100%;" border="1">
<tr><td style="height:30px;">1</td></tr>
<tr><td style="height:100%;">DIV</td></tr>
<tr><td style="height:15px;">3</td></tr>
</table>
Es la adecuada para mi problema.
SOLUCIÓN: poner "height:100%" en la celda problemática, para que luego su contenido, sea lo que sea (imagen, div, IFRAME...) herede este 100%
Voy a revisar los enlaces que me has pasado, por si hay cosas que me puedan servir para otras cosas.
(Y sobre los div con height:100%, ya abriré otra pregunta si sigo con dudas, pues ese es otro tema)
Gracias
(Y perdón por abusar)
David P
2007
No me he dado cuenta, y he "abusado" demasiado de tu buena voluntad.
La respuesta que me diste:
<table style="height:100%;" border="1">
<tr><td style="height:30px;">1</td></tr>
<tr><td style="height:100%;">DIV</td></tr>
<tr><td style="height:15px;">3</td></tr>
</table>
Es la adecuada para mi problema.
SOLUCIÓN: poner "height:100%" en la celda problemática, para que luego su contenido, sea lo que sea (imagen, div, IFRAME...) herede este 100%
Voy a revisar los enlaces que me has pasado, por si hay cosas que me puedan servir para otras cosas.
(Y sobre los div con height:100%, ya abriré otra pregunta si sigo con dudas, pues ese es otro tema)
Gracias
(Y perdón por abusar)
David P
2007
