DIV растягивается до высоты 100% в ячейке таблицы

У меня есть следующий макет:

4 круглых угла фона и две панели (левая панель и правая панель) внутри.

В настоящее время я реализую макет следующим образом:

Таблица с 9 ячейками:

top left corner    |                  | top right corner
                   |left div right div|
bottom left corner |                  | bottom right corner

код:

<!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>
                &nbsp;</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>

Я хочу спросить, как я могу растянуть высоту правого div до 100%, чтобы он равнялся высоте td (высота левого div будет увеличиваться в зависимости от того, действие).

Я пробовал много способов и до сих пор не могу понять. Установить высоту div на 100% не работает.

Что мне делать, чтобы добиться этого? Не использовать таблицу?

PS:

Код изменен. Вы можете вставить код в блокнот и протестировать его в IE.

Код снова редактируется, чтобы добавить DOCTYPE.

Ответ 1

Увидев, что у вас уже есть таблицы для макета, я бы не стал пытаться сделать это "правильным" способом.

Просто используйте другую таблицу.
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>&nbsp;</td>
    <td><img src="corner2.jpg"/></td>
</tr>
<tr>
    <td>&nbsp;</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>&nbsp;</td>
</tr>
<tr>
    <td><img src="corner3.jpg"/></td>
    <td>&nbsp;</td>
    <td><img src="corner4.jpg"/></td>
</tr>
</table>

Ответ 2

возможно, вы можете добавить минимальную высоту вправо div, равную значению высоты левой... возможно, это может сделать трюк с тем, что вы хотите...

Ответ 3

Или как просто использовать диапазон?

например.

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

Не беспокойтесь слишком много о 100% в элементах таблицы, а посмотрите на диапазон.
Пролет:

        <span style="height:100%; display:inline-block; width: 100%; background-color:blue;">
            blinkers on!
        </span>

См. "display: inline-block"? Теперь это важная часть.
Я надеюсь, что это поможет...

Ответ 4

Вы можете установить положение div как абсолютное, но тогда, конечно, вам придется полностью позиционировать его.

Ответ 5

Я использовал jquery и анимированный вызов для установки высот divs, но вы можете установить скорость анимации на 0.

В качестве примера можно привести некоторые макеты для быстрой игры с 2,3,5... блочными конструкциями. Вызов Jquery animate используется для определения высоты divs для основного контента, боковой панели и т.д., Но это может быть немного превыше всего для вашего требования.

<%@ 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>