Вёрстка « css: Зависимость высоты div'a от соседнего блока.

Есть див блок(обертка) с height:auto; Внутри него два блока, также с динамичной высотой. Дело в том, что один из этих двух блоков больше. Как сделать, чтобы другой блок растягивался до низу?(для того, чтобы опустить бордер).
Думаю, картинка поможет лучше понять задачу.

1 ответов




Родительскому блоку position:relative и overflow:hidden, DIV 2 - margin-left равный ширине DIV 1, DIV 1 - position: absolute, top:0, bottom: 0. И ширину - задать явно.


попробуй использовать свойство display:table


<div id="content-sidebar">
    <div id="content">

    </div>
    <div id="sidebar">

    </div>
  </div>
 

#content-sidebar{
    display:table;
    width:100%;
  }
  #content{
    display:table-cell;
    padding-right:10px;
  }
  #sidebar{
    display:table-cell;
    width:300px;
    background-color: #f9f9f9;
    border-left: 1px solid #f1f1f1;
  }
 

единственно надо сверится с таблицей совместимости
http://quirksmode.org/css/display.html

если такой вариант не подойдет могу предложить еще один

Можно сделать видимость того, что они одинаковой высоты, если вам только бордер нужен. Пример http://jsfiddle.net/ZGbxt/


Я уже встречал решение этой проблемы, посмотри что пишет Сергей Чикуенок об этом. Без таблиц, все на дивах, легко и просто. Он и пример сделал.
Конечно, нормально работает в IE.


Я как понимаю здесь уже вся фишка в размере текста) блок растягивается, а текст нет.


я подумал над твоим вопросом и вроде можно если ты сделаешь внизу блок фуутер в теле и дашь ему определенное место,то значения высот опустятся до его уровня. если, что кинь мне css и html сюда и я те все поправлю