Question

我正在尝试创建一个网站，它的设计迫使我使用多个背景。我在谈论一种看起来像这样的技术

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

同时必须为页面创建一个相等的div / column height结构。

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

＃left，＃center和#right div应该具有相同的高度并且看起来充满背景。我通过互联网阅读了很多关于等高div的技术，但是添加了多个背景问题，这使我无法在这里找到解决方案。

我想知道是否有人可以帮助我。提前致谢

alt text http://img341.imageshack.us/img341/6418/problemo.jpg

Answer 1

如果您不介意使用javascript / jquery，可以将其添加到您的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>

Answer 2

省去麻烦，只需使用表格进行外部布局。他们只是工作。

以下是表格示例：

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

相等的高度divs - 复杂的多个背景

2 个答案: