Расширение боковой панели вниз страницы

Question

Я пытаюсь заполнить правую боковую панель, чтобы увеличить длину содержимого моего #wrapper на этом сайте: http://www.starmedianetwork.com/

Я поместил красную рамку вокруг нее, чтобы попытаться увидеть, где мое # право находится на моей странице. Я пытался работать с:

высота: 100% на том # праве и других. Кроме того, я искал в Google информацию о четких исправлениях, но я не смог этого сделать, также наткнулся на некоторые решения по обмену экспертами, но они не сработали.

Есть идеи, как можно расширить боковую панель цветом фона, чтобы она соответствовала длине?

Answer 1

Этого можно добиться с помощью искусственной боковой панели:

<div class="sidebar_back"><.div>
<div class="sidebar">
  <p>The sidebar content</p>
</div>

С этим css:

.sidebar_back {
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 200px;
  background: #444; // the color you want the sidebar to be
  position: absolute;
}

.sidebar {
  float: left;
  width: 180px;
  padding: 10px;
}

.sidebar_back расширится до конца страницы, поэтому просто задайте цвет, которым вы бы хотели, чтобы боковая панель была, и фактический div боковой панели будет казаться полноразмерным. Вы также можете использовать процентную ширину вместо пикселей. Вот кодекс, показывающий пример: http://codepen.io/poopsplat/full/jquBv

Answer 2

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

$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
    $('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
    $('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});

Кажется, что это работает во всех браузерах, однако, когда содержимое справа больше, чем область просмотра, и проблема будет возникать при прокрутке вниз. Это можно исправить с помощью некоторых проверок высоты содержимого, но для меня это не имеет значения. Надеюсь, что это поможет кому-то там =)

Answer 3

Вот способ, который я нашел, чтобы решить эту проблему:

Вы должны использовать четыре тега div - один основной контейнер, который содержит боковую панель, основное содержимое и нижний колонтитул.

Сначала добавьте и стилизуйте элементы в вашей таблице стилей:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

Вы можете редактировать различные элементы по своему усмотрению, просто убедитесь, что вы не изменили свойство нижнего колонтитула «clear: both» - это очень важно оставить.

Затем просто настройте свою веб-страницу следующим образом:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

Я написал более подробное сообщение в блоге об этом на [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы. Надеюсь, это поможет!

Answer 4

Я не пробовал этого, но ... такое ощущение, что это должно сработать (что, конечно, вероятно, поцелуй смерти в попытке):

#wrapper
    {position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: #ffa;
        }

#right {position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 15%; /*  this has to be fixed-size so you can account
            for it in the next bit; but can still be kinda
            fluid-ish... */
    display: block;
    background-color: #ccc;
    overflow: auto;
        }

#left   {width: 83%; /*  100 - (15% + 2% (for a gutter)) */
    margin-left: 1%;
        margin-right: 16%; /*   less than 100 - 83, to allow for rounding of % or px */
    display: block;
    background-color: #0ff;
    overflow: auto;
        }

p   {display: block;
    margin: 0.5em;
    padding: 0.2em 0.5em;
        }

...

<body>

    <div id="wrapper">

        <div id="left">
            <p>The left-hand content</p>

        </div>

        <div id="right">
            <p>The right-hand content</p>
        </div>

    </div>

</body>

Это не очень красиво, но работает. Хотя я не фанат использования position: absolute (или fixed), поэтому, если у кого-то есть лучшее предложение, я бы пошел на это =)

Кстати, есть рабочая демонстрация реализации (с добавленной добротой 'lorem ipsum') в: http://www.davidrhysthomas.co.uk/so/cols.html.

(Хорошо, я солгал: я ясно уже попробовал это сейчас ...)

Answer 5

Вы не можете получить div, чтобы заполнить высоту его родителя. Он может работать в одном браузере, но у меня была эта проблема, и она не просто решается по высоте: 100%.

Вы можете смоделировать фон, создав фон, который выложен плиткой вниз по всей стороне. Это не самое элегантное решение.

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

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

Answer 6

Вы можете попробовать этот подход: http://www.alistapart.com/articles/multicolumnlayouts/