DIV stretch to height 100% in a table cell

前端未结

关注

 5  1012

被撕碎了的回忆

I have following layout:

4 rounded corners background and two panels (left panel and right panel) inside it.

Currently I implement the layout as follows:

相关标签:

5条回答

不知归路

2020-12-10 12:10

I have used jquery and the animate call to set heights of divs, but you can set the animate speed to 0.

The example belows was for some mockups for quickly playing around with 2,3,5... block designs. The Jquery animate call is used to size the height of divs for main content, sidebar etc, ... but this may be a bit over the top for your requirement.

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

0 讨论(0)

半阙折子戏

2020-12-10 12:21

maybe you can add a min-height to the right div equals to the value of height of the left one... it could maybe do the trick to what you want...

0 讨论(0)
发布评论:

提交评论
- 加载中...
时光取名叫无心

2020-12-10 12:21

You could set the position of the div to be absolute, but then of course you'd have to position it absolutely.

0 讨论(0)
发布评论:

提交评论
- 加载中...

误落风尘

2020-12-10 12:27

Seeing as you already have tables for layout, I wouldn't really bother trying to do it the "right" way.

Just use another table.
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>

0 讨论(0)

深忆病人

2020-12-10 12:27

Or how about just using a span?

eg.

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

Don't worry too much about the 100% in the table elements, but rather look at the span..
The span :

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

See the 'display:inline-block'? Now that is the important part..
I hope that this helps..

0 讨论(0)