Question

我有以下布局：

四个圆角背景和两个面板（左面板和右面板）。

目前我按如下方式实施布局：

包含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 。

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

Answer 2

也许你可以在正确的div中添加一个最小高度等于左边的高度值...它可能可以按你想要的那样去做...

Answer 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'？现在这是重要的部分..
我希望这会有所帮助..

Answer 4

你可以将div的位置设置为绝对，但当然你必须绝对定位它。

Answer 5

我使用了jquery和animate调用来设置div的高度，但你可以将动画速度设置为0。

下面的例子是一些模型，用于快速玩2,3,5 ...块设计。 Jquery动画调用用于调整主要内容，侧边栏等的div的高度...但是这可能有点超出您的要求的顶部。

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

DIV在表格单元中伸展到100％的高度

5 个答案: