Equal height divs - complicated with multiple backgrounds_问答_开发者

Equal height divs - complicated with multiple backgrounds

开发者 https://www.devze.com 2022-12-20 18:15 出处：网络

I\'m trying to create a website and it\'s design is forcing me to use multiple backgrounds. I\'m talking about a technique that looks like this

I'm trying to create a website and it's design is forcing me to use multiple backgrounds. I'm talking about a technique that looks like this

    <div id="left">
         <div id="left_1">
              <div id="left_2">

              </div>
         </div>
    </div>

#left{
 width:235px; 
 margin:0; padding:0; float:left;
 background:url(../images/left_middle.jpg) top left repeat-y;
}
#left_1{
 width:235px; 
 margin:0; padding:0; float:left;
 background:url(../images/left_top.jpg) top left no-repeat;
}
#left_2{
 width:218px; 
 margin:0; padding:0 0 0 17px; float:left;
 background:url(../images/left_bottom.jpg) bottom left no-repeat;
}

At the same time a have to create an equal div/column height structure for the page.

<div id="container">

     <div id="left">
          <div id="left_1">
               <div id="left_2">

开发者_运维技巧               </div>
          </div>
     </div>

     <div id="center">

     </div>

     <div id="right">
          <div id="right_1">
               <div id="right_2">

               </div>
          </div>
     </div>
</div>

The #left, #center and #right divs should have the same height and look full with background. I have read a lot of techniques through internet about the equal-height-divs but adding the multiple backgrounds issue, makes it impossible for me to find a solution here.

I was wondering if someone could help me out there. Thanks in advance

Equal height divs - complicated with multiple backgrounds

if you don't mind using javascript/jquery, you can add this to your html:

<script type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script type='text/javascript'>
$(document).ready(function() {

    // get the heights
    l = $('#left_2').height();
    r = $('#right_2').height();
    c = $('#center').height();

    // get maximum heights of all columns
    h = Math.max(c, Math.max(l, r));

    // apply it
    $('#left_2').height(h);
    $('#right_2').height(h);
    $('#center').height(h);
    });
</script>

Save yourself the trouble and just use tables for the outer layout. They just work.

Here's the table example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>left</title>
    <style type="text/css">
        .side { background-color:blue;color:white;width:235px;vertical-align:top;margin:0px;padding:0px;}
        .left3 {padding:0px 0px 0px 17px;vertical-align:top;}
        .mainContent {margin:0px;vertical-align:top;}
        table {width:100%;height:100%;border-collapse:collapse;}
        html,body{width:100%;height:100%;margin:0px;}
    </style>
</head>

<body>
<table>
    <tr>
        <td class="side">left
            <table>
                <tr><td class="side">left side 2
                    <table><tr><td class="left3">Left Side 3</td></tr></table>
                </td></tr>
            </table>
        </td>
        <td class="mainContent">center</td>
        <td class="side">right</td>
    </tr>
</table>
</body>

</html>