Подтвердить что ты не робот

100% высота левой боковой панели с динамическим правым контентом - Bootstrap + Wordpress

Я делаю сайт, используя Bootstrap и Wordpress. Это двухстрочный макет - левая боковая панель, правильное содержание. Правильное содержание является динамическим и расширяется бесконечным прокруткой. Я попытался сделать левую боковую высоту на 100% несколькими способами, но безрезультатно.

Я хочу, чтобы боковая панель продолжалась вниз в соответствии с размером окна просмотра/высоты правильного содержимого div.

Я сделал голую скрипку: http://jsfiddle.net/ydPMr/3, но было бы лучше, если бы вы увидели, о чем я говорил на моей странице dev: http://joshuawalker.koding.com.

Вот основная структура моей страницы:

<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"></div>
</div>
<div class="wire-unit hero-fix">
</div>
<div class="sidebar hidden-phone"></div>
<div class="content"></div>

Если у кого-то есть идеи о том, как заставить боковую панель растягивать всю высоту, я был бы признателен.

Спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

Это отлично работает для меня. Fiddle

Я установил min-Height в 500px. Если вы не хотите минимального, удалите его. Он будет работать в соответствии с height вашего контента в content div. Как Fiddle

  <div class="wrapper">
    <div class="sidebar hidden-phone">
    </div>
    <div class="content">


    </div>
</div>

и стиль

<style type="text/css" >
    .wrapper
    {
        min-height:100%;
        width:100%;
        position:relative;
        background-color:Black;
        display:inline-block;
    }
    .sidebar
    {
        width:20%;
        top:0px;
        left:0px;
        bottom:0px;
        position:absolute;
        background-color:Aqua;
    }
    .content
    {
        min-height:500px;
        width:80%;
        position:relative;
        background-color:Gray;
        float:right;
    }
</style>