ejemplos - section html
Estiramiento DIV a altura 100% en una celda de mesa (5)
Tengo el siguiente diseño:
4 esquinas redondeadas de fondo y dos paneles (panel izquierdo y panel derecho) en su interior.
Actualmente implemento el layout de la siguiente manera:
Tabla con 9 celdas:
top left corner | | top right corner |left div right div| bottom left corner | | bottom right corner
Código:
<!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">
<body>
<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="corner1.jpg" /></td>
<td>
</td>
<td>
<img src="corner2.jpg" /></td>
</tr>
<tr>
<td>
</td>
<td valign="top" height="100%">
<div id="menu" style="float: left; width: 235px; height: 445px; background-color: #660000">
Menu
</div>
<div id="mainContent" style="float: left; margin-left: 10px; height: 100%; background-color: #888888">
Main Content
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="corner3.jpg" /></td>
<td>
</td>
<td>
<img src="corner4.jpg" /></td>
</tr>
</table>
</body>
</html>
Lo que quiero preguntar es cómo puedo estirar la altura del div derecho al 100% para que sea igual a la altura del td (la altura del div izquierdo aumentará según la acción de los usuarios).
He intentado de muchas maneras y todavía no puedo entenderlo. Establecer la altura de div al 100% no funciona.
¿Qué debo hacer para lograr esto? ¿No usas la mesa?
PD:
Se cambia el código. Puede pegar el código en el bloc de notas y probarlo en IE .
El código se edita de nuevo para agregar el DOCTYPE .
¿O qué tal solo usando un lapso?
p.ej.
<table width="100%">
<tr>
<td style="height:540px; width:100%; background-color:green;">
my name is earl!
</td>
</tr>
<tr>
<td style="height:540px; width:100%; background-color:yellow;">
<span style="height:100%; display:inline-block; width: 100%; background-color:blue;">
blinkers on!
</span>
</td>
</tr>
</table>
No se preocupe demasiado por el 100% en los elementos de la tabla, sino que mire el intervalo.
El lapso :
<span style="height:100%; display:inline-block; width: 100%; background-color:blue;">
blinkers on!
</span>
Ver el ''display: inline-block''? Ahora que es la parte importante ..
Espero que esto ayude..
Al ver que ya tiene tablas para el diseño, realmente no me molestaría en tratar de hacerlo de la manera "correcta" .
Solo usa otra mesa.
CSS
<style type="text/css" media="screen">
#menu {
width:235px;
height:445px;
background-color:#660000
}
#mainContent {
height:100%;
width:auto;
background-color:#888888
}
#container {
width:100%;
}
</style>
HTML
<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="corner1.jpg"/></td>
<td> </td>
<td><img src="corner2.jpg"/></td>
</tr>
<tr>
<td> </td>
<td valign="top" style="padding:0px;">
<table id="container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="menu"><div>Menu</div></td>
<td style="width:10px"></td>
<td id="mainContent"><div>Main Content</div></td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td><img src="corner3.jpg"/></td>
<td> </td>
<td><img src="corner4.jpg"/></td>
</tr>
</table>
He utilizado jquery y la llamada animada para establecer las alturas de divs, pero puedes establecer la velocidad de animación en 0.
El ejemplo se muestra en algunas maquetas para jugar rápidamente con 2,3,5 ... diseños de bloques. La llamada animada de Jquery se usa para dimensionar la altura de los divs para contenido principal, barra lateral, etc., pero esto puede ser un poco exagerado para su requerimiento.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mock_2_ColGoldenRatio.aspx.cs" Inherits="ia._HtmlMocks.Mock_2_ColGoldenRatio" %>
<!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 runat="server">
<title></title>
<style type="text/css" >
/*normalise*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
font-size:100%;
font-style:normal ;
font-weight:normal;
border-collapse:collapse ;
border-spacing:0;
border:0;
border-width: 0px ;
text-align:left;
}
q:before,q:after
{
content:'''';
}
/*center everything using html container*/
html{
text-align: center ;
}
/* wash with olive ; make body width max 976 px ; no margin ; relative position so other elements within */
body
{
background-color:Olive;
width:976px;
margin:0 auto ;
text-align: left ;
position: relative ;
}
#HeaderEnc
{
background-color : Maroon ;
}
#SearchEnc{
background-color: red ;
border-width: 0px ;
}
#MainBlogNav{
background-color:Yellow ;
}
/* postion relative to normal flow */
#ContentEnc{
background-color: Teal ;
position: relative ;
}
#ContentSideBarA
{
position: absolute ;
background-color: #AAA ;
left: 62% ;
width: 38% ;
}
#ContentMainEnc{
position: absolute ;
background-color: #888;
left: 0% ;
width: 62% ;
}
#ContentSideBarB{
position:absolute ;
background-color : #AAA ;
left: 0% ;
width: 0px ;
}
#FooterEnc{
position: absolute ;
background-color: blue ;
left: 0 ;
width: 100% ;
}
</style>
</head>
<body>
<div id="HeaderEnc">
The quick brown fo jumped over the lazy dog.
<br />
HeaderEnc
<div id="SearchEnc">SearchEnc</div>
<div id="MainBlogNav">MainBlogNav</div>
</div>
<div id="ContentEnc">
<div id="ContentMainEnc"><i>ContentMainEnc</i> :
<% Response.Write( GetContentBig()) ; %>
</div>
<div id="ContentSideBarA"><i>ContentSideBarA</i>
<% Response.Write( GetContentSmall()) ; %>
</div>
<div id="ContentSideBarB"><i>ContentSideBarB</i>
<% /*Response.Write( GetContentMedium()) ;*/ %>
</div>
<i>ContentEnc-Start</i>
<br />
<br />
<br />
<br />
<i>ContentEnc-Start</i>
</div>
<div id="FooterEnc" >FooterEnc</div>
</body>
</html>
<script src="../../Scripts/jquery-1.3/jquery-1.3.1.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/dimensions_1.2/jquery.dimensions.js" type="text/javascript" ></script>
<!--<script src="../../Scripts/Common/IaCommon.js" type="text/javascript" ></script>-->
<script type="text/javascript" >
/*
* ia.common 0.1.0
*
*/
var ia = {}
ia: "0.1.0";
// gets max settings from set of elements
var getBoundaries = function(elements) {
var maxHeight = 0;
var maxTop = 0;
var itemSelector = '''';
var itemHeight = 0;
var itemPosition = {};
var itemTop = 0;
for (i = 0; i < elements.length; i++) {
itemSelector = elements[i]
itemHeight = $(itemSelector).height();
itemPosition = $(itemSelector).position();
itemTop = itemPosition.top;
maxHeight = itemHeight > maxHeight ? itemHeight : maxHeight;
maxTop = itemTop > maxTop ? itemTop : maxTop;
}
return { ''maxHeight'': maxHeight, ''maxTop'': maxTop };
}
// Rets truthy ; used by property get/set public fns
var SetIfOk = function(val) { return val; }
// IaPage class
var IaPage = function(objSpec) {
// override default page object with defaults from caller
var that = $.extend({
''speedFooterAnimate'': 3000
, ''speedContentAnimate'': 1000
}, objSpec || {});
// fn to move footer, ... to correct position : inmann clearing
that.arrangePageStructure = function() {
boundaries = getBoundaries(this.ContentElements);
$(this.FooterEncSelector[0]).animate({ ''top'': boundaries.maxTop + boundaries.maxHeight }, this.speedContentAnimate);
$(this.ContentEncSelector[0]).animate({ ''height'': boundaries.maxHeight }, this.speedFooterAnimate);
};
// Ret
return that;
}
var iaPage = IaPage(
{
''ContentEncSelector'': [''#ContentEnc'']
, ''FooterEncSelector'': [''#FooterEnc'']
, ''ContentElements'': [''#ContentEnc'', ''#ContentSideBarA'', ''#ContentMainEnc'', ''#ContentSideBarB'']
}
);
$(function() {
iaPage.arrangePageStructure();
}
);
</script>
Podría establecer la posición del div para que sea absoluta, pero luego, por supuesto, tendría que posicionarla absolutamente.
tal vez puede agregar una altura mínima a la div div igual al valor de la altura de la izquierda ... tal vez podría hacer el truco a lo que quiera ...