Как заблокировать боковую панель по высоте окна, даже когда пользователь прокручивает?

Question

Как заблокировать боковую панель по высоте окна, даже когда пользователь прокручивает?

0

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

#sidebar {
    width: 180px;
    padding: 10px;
    position: absolute;
    top: 50px;
    bottom: 0;
    float: left;
    background: #eee;
    color: #666;
}

Соответствующий CSS - это в значительной степени то, что вы ожидаете:

<div id="header">
    The header which takes up 50px in height
</div>
<div id="main-container">
    <div id="sidebar">
        The sidebar in question
    </div>
    <div id="main-content">
        The rest of my page
    </div>
</div>

Код работает, как ожидается, по большей части. Когда страница показывает, что она охватывает 100% высоты (минус 50 пикселей сверху). Проблема в том, что он по существу присваивает коробке точную высоту окна, так как я прокручиваю вниз, окно прокручивается, а не остается заблокированным в нижней части окна. Есть идеи, как это решить?

Andrew.S 21 окт. 2013, в 08:28

Источник

Теги:

html

css

position

alignment

3 ответа

0

Прежде всего, я не понимаю, как он охватывает 100% высоты, когда высота не определена.

Вторая position: fixed использования position: fixed а не абсолютная.

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

<div style="clear: both;"></div>

и сделать основной контейнер также плавать влево или плавать вправо, если это не дает вам то, что вы хотите. Удивительно, как такой общий макет может казаться сложным, чтобы делать правильно. (по крайней мере, для новичков, подобных нам). Возможно, я ошибаюсь, это может быть не лучший способ, но так, как я это сделал. Дополнительный div, который вы добавляете, так что плавающие divs занимают место, кроме того, если он не работает, дайте боковой панели высотой 100%, или если вы думаете, что это переполнение, скажите мне, что я добавлю к моему ответу,

Jahanzeb Khan 21 окт. 2013, в 04:38

0

используйте position:fixed css position:fixed чтобы сделать боковую панель фиксированной.

чтобы заблокировать высоту в соответствии с высотой экрана, я бы использовал javascript/jquery:

$(function(){
    // assign to resize 
    $(window).resize(set_height);
});

function set_height() {
    $('#sidebar_id').height($(window).height());
}

надеюсь, это поможет

geevee 21 окт. 2013, в 03:38

Ещё вопросы

Vucko · Accepted Answer · 2013-10-21T03-10-00.000Z

Вы должны использовать position:fixed если вы хотите, чтобы sidebar фиксировалась в некоторой позиции:

#sidebar {
    width: 180px;
    padding: 10px;
    position: fixed;
    top: 50px;
    bottom: 0;
    background: #eee;
    color: #666;
}

JSFiddle

Другим способом было бы предоставить родительскому контейнеру position:relative и по его position:absolute ребенка position:absolute - но тогда родитель должен иметь некоторую height чтобы дочерний элемент занимал высоту.

html,body{
    position:relative;
    height:100%; /* some height */
}

#sidebar{
    width: 180px;
    padding: 10px;
    position: absolute;
    top: 50px;
    bottom: 0;
    background: #eee;
    color: #666;
}

JSFiddle

Проверьте learnlayout, чтобы узнать больше о позиционировании.