Создание div с двумя внутренними div. Фон / Содержание должно "следовать" - PullRequest
Новая
       16

Создание div с двумя внутренними div. Фон / Содержание должно "следовать"

0 голосов
/ 29 ноября 2011

Как мне сделать так:

[DIV-1]

[DIV -2] БОКОВОЕ МЕНЮ ВНУТРИ 2 [/ DIV - 2]

[DIV -3] ГЛАВНОЕ СОДЕРЖАНИЕ ВНУТРИ 3 [/ DIV -3]

[/ DIV-1]

Итак, предположим, что DIV 3 имеет действительно длинный контент - намного больше, чем DIV 2.

Как я могу сделать так, чтобы фон, границы и т. Д. В DIV 2 соответствовали высоте DIV 3?

Пока я пробовал с сеткой 980.css, хотя она не работала.

Вот что у меня сейчас: 

        <div class="column grid_12">

                <div class="column grid_3" style="background-color:gray;">
                MENU!
                </div>
                <div class="column grid_8" style="background-color:black;">
                CONTENT!    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

            </div>

        </div>




</div><!-- End Row -->

С наилучшими пожеланиями

Ответы [ 4 ]

0 голосов
/ 03 декабря 2011

Лично мне нравятся колонки одинаковой высоты от www.ejeliot.com

Я установил пример на JSFiddle - http://jsfiddle.net/spacebeers/s8uLG/1/

Вы устанавливаете свой контейнер с переполнением, установленным на скрытый, затем к каждому элементу div добавляете отрицательное поле margin-bottom и равное положительное padding-bottom. 

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
   <div>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
   </div>
</div>

Искусственные столбцы также хороши и, вероятно, их легче настроить, но если вы действительно устали от использования изображения, это довольно хороший метод.

0 голосов
/ 29 ноября 2011

Если второй столбец всегда будет длиннее первого, вы можете использовать что-то вроде следующего примера: 

<html>
<head>

    <style>
        .container {overflow:hidden; position:relative;}
        .col1 {position:absolute; width:200px; height:100%; top:0px; left:0px; background:#ffbebe;}
        .col2 {width:400px; margin:0px 0px 0px 200px; background:#ffff00;}
    </style>

</head>

<body>

    <div class="container">

        <div class="col1" >
           MENU!<br />
        </div>

        <div class="col2" >
            CONTENT!<br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

    </div>

</body>
</html>
0 голосов
/ 29 ноября 2011

Ваша самая лучшая и самая простая ставка заключается в использовании искусственных столбцов .

0 голосов
/ 29 ноября 2011

возможно, вы можете использовать JavaScript и установить высоту DIV2 на высоту DIV3.

Как: 

$(document).ready(function(){
   var MyHeight = $('.grid_3').height();
   $('.grid_8').height(MyHeight);
});
...