Равные высоты высоты - сложный с несколькими фонами - PullRequest
Новая
       19

Равные высоты высоты - сложный с несколькими фонами

0 голосов
/ 22 февраля 2010

Я пытаюсь создать сайт, и его дизайн заставляет меня использовать несколько фонов. Я говорю о технике, которая выглядит следующим образом 

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

div #left, #center и #right должны иметь одинаковую высоту и полностью соответствовать фону. В интернете я прочитал много техник о равных высотах, но добавление проблемы с несколькими фонами не позволяет мне найти решение здесь.

Мне было интересно, может ли кто-нибудь помочь мне там. Заранее спасибо

alt text

Ответы [ 2 ]

2 голосов
/ 22 февраля 2010

если вы не возражаете против использования 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>
1 голос
/ 22 февраля 2010

Избавьте себя от проблем и просто используйте таблицы для внешнего макета Они просто работают.

Вот пример таблицы: 

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