Html 表格单元格中的DIV拉伸到100%高度_Html_Css

Html 表格单元格中的DIV拉伸到100%高度

html css

Html 表格单元格中的DIV拉伸到100%高度,html,css,Html,Css,我的布局如下： 4个圆角背景和两个面板（左面板和右面板）在其内部目前，我实现了如下布局：表中有9个单元格： top left corner | | top right corner |left div right div| bottom left corner | | bottom right corner 左上角| |右上角 |左div右div| 左下角| |右下角代码：菜

我的布局如下：

4个圆角背景和两个面板（左面板和右面板）在其内部

目前，我实现了如下布局：

表中有9个单元格：


菜单
主要内容

我想问的是如何将右div的高度拉伸到100%，使其等于td的高度（左div的高度将根据用户的操作而增加）

我已经尝试了很多方法，但仍然无法解决。将div的高度设置为100%不起作用

我该怎么做才能做到这一点？不要用桌子

附言：

代码已更改。您可以将代码粘贴到记事本中，并在IE中进行测试

再次编辑代码以添加DOCTYPE

也许您可以在右侧div中添加一个与左侧div的高度值相等的最小高度。。。它可能会达到你想要的效果…

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

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

下面的例子是一些模型，用于快速地使用2,3,5。。。块设计。jqueryanimate调用用于调整主要内容、边栏等的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>


/*正常化*/
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，地址，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，dd，ol，ul，li，fieldset，form，label，label，图例，table，table，table，caption，tbody，tfoot，thead，tr，th，th，td{
保证金：0；
填充：0；
字体大小：100%；
字体风格：普通；
字体大小：正常；
边界塌陷：塌陷；
边界间距：0；
边界：0；
边框宽度：0px；
文本对齐：左对齐；
}
问：之前，问：之后
{
内容：''；
}
/*使用html容器将所有内容居中*/
html{
文本对齐：居中；
}
/*橄榄洗净；使车身宽度最大为976像素；没有边际；相对位置，以便在*/
身体
{
背景颜色：橄榄色；
宽度：976px；
保证金：0自动；
文本对齐：左对齐；
位置：相对位置；
}
#海德雷纳
{
背景颜色：栗色；
}
#搜索{
背景色：红色；
边框宽度：0px；
}
#主博客导航{
背景颜色：黄色；
}
/*相对于正常流量的位置*/
#内容{
背景色：青色；
位置：相对位置；
}
#塞德巴拉酒店
{
位置：绝对位置；
背景色：#AAA；
左：62%；
宽度：38%；
}
#内容维护{
位置：绝对位置；
背景色：#888；
左：0%；
宽度：62%；
}
#知己{
位置：绝对位置；
背景色：#AAA；
左：0%；
宽度：0px；
}
#页脚{
位置：绝对位置；
背景颜色：蓝色；
左：0；
宽度：100%；
}
那只敏捷的棕色狐狸跳过了那只懒狗。


海德雷纳
搜索
主博客导航
内容维护：
塞德巴拉酒店
知己
内容启动








内容启动
页脚
/*
*ia.common 0.1.0
*
*/
变量ia={}
ia:“0.1.0”；
//从元素集获取最大设置
var getbounders=函数（元素）{
var maxHeight=0；
var-maxTop=0；
var itemSelector=''；
var itemHeight=0；
var itemPosition={}；
var itemTop=0；
对于（i=0；imaxHeight？itemHeight:maxHeight；
maxTop=itemTop>maxTop？itemTop:maxTop；
}
返回{'maxHeight'：maxHeight，'maxTop'：maxTop}；
}
//真实的；由属性get/set public fns使用
var SetIfOk=函数（val）{return val；}
//IaPage类
var IaPage=函数（objSpec）{
//使用调用者的默认值覆盖默认页面对象
var that=$.extend({
“speedFooterAnimate”：3000
，“speedContentAnimate”：1000
}，objSpec |{}）；
//fn将页脚…移动到正确位置：inmann清除
that.arrangePageStructure=函数（）{
边界=GetBounders（this.ContentElements）；
$（this.FooterEncSelector[0]）.animate（{'top'：bounders.maxTop+bounders.maxHeight}，this.speedContentAnimate）；
$（this.ContentEncSelector[0]）.animate（{'height'：bounders.maxHeight}，this.speedFooterAnimate）；
};
//Ret
归还；
}
var iaPage=iaPage(
{
“ContentEncSelector”：[“#ContentEnc']
，“FooterEncSelector”：[“#FooterEnc']
，'ContentElements'：['ContentEnc'，'ContentSideBarA'，'ContentMainEnc'，'ContentSideBarB']
}
);
$（函数（）{
iaPage.arrangePageStructure（）；
<%@ 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>

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

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

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

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