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

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

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

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

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


css xhtml
person Coughlin    schedule 11.05.2009    source источник

Ответы (6)


arrow_upward
2
arrow_downward

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

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

person itsmattsoria    schedule 27.12.2013
comment
Спасибо, человек, который помог мне с очень похожей проблемой, которая у меня тоже была. Оценил! - person daltec; 26.04.2014

arrow_upward
1
arrow_downward

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

person Temple    schedule 11.05.2009
comment
чем это не полезно? По ссылке есть решение проблемы. Вы можете увидеть, как это работает здесь: alistapart.com/d/multicolumnlayouts/ - person Temple; 11.05.2009
comment
Он не распространяется на нижнюю часть окна браузера. - person aehlke; 20.11.2010

arrow_upward
1
arrow_downward

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

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

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

Там могут быть некоторые библиотеки javascript, которые помогут вам позиционировать этот проблемный div, но я не могу придумать ни одной на данный момент.

person Kekoa    schedule 11.05.2009
comment
Дайте родителю высоту (как хотите) и position: relative; затем укажите дочерний элемент с position: absolute (и сверху: и снизу: 0), и он может заполнить высоту своего родителя. Хотя это не обязательно красиво.. - person David says reinstate Monica; 11.05.2009

arrow_upward
1
arrow_downward

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

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

(Ладно, я солгал: теперь я явно пробовал...)

person David says reinstate Monica    schedule 11.05.2009

arrow_upward
1
arrow_downward

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

Вы должны использовать четыре тега 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] . Пожалуйста, дай мне знать, если возникнут какие-либо вопросы. Надеюсь это поможет!

person TheLibzter    schedule 23.08.2010

arrow_upward
1
arrow_downward

Я решил проблему с боковой панелью для своей страницы администратора с помощью 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
});

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

person Scripghost    schedule 09.01.2012