Fixed боковая панель закреплена между колонтитулами

У меня есть боковая панель, которая является position:fixed и height:100%Fixed боковая панель закреплена между колонтитулами

Однако, эффект не то, что я желаю. Высота 100% - это 100% окна, где мне нужно быть 100% его контейнера, который ограничен между верхним и нижним колонтитулом. Заголовок также фиксируется, поэтому основное содержимое прокручивается «под ним», а нижний колонтитул привязан к нижней части основного содержимого, которое может иметь переменную высоту в зависимости от того, сколько содержимого загружено.

В этом jsfiddle Я установил высоту ul#toolBarList на 200px для демонстрации. Если вы увеличиваете окно и прокручиваете вниз, боковая панель должна занимать всю высоту белого пространства. Я не имею в виду простой набор фона за списком, а скорее, что нижняя часть боковой панели должна привязываться к верхней части нижнего колонтитула.

Чтобы узнать, почему 100% не работает, установите 200px на номер 100% и убедитесь, что список переполняет нижний колонтитул.

Ответ может быть кратким javascript или, возможно, всем CSS с совместимостью с IE8 +, последним хром/firefox.

Большое спасибо

источник

2013-02-22 parliament

Вы должны установить высоту всех его родительских элементов до 100%, или просто использовать этот CSS вместо высоты:

top: 0; 
bottom: 0; 
right: 0; //whichever side you want it on

источник

2013-02-22 20:51:51

Я попытался это в моей скрипке и не могу заставить его работать. Можешь ли ты показать мне? – parliament

http://jsfiddle.net/TGw7j/ –

Вот ваш пример, слегка переработанный, чтобы снова показать проблему. http://jsfiddle.net/TGw7j/4/ Я исправил заголовок, чтобы он не прокручивался, давал ему высоту и добавил верхнее смещение на #wrapper, равное высоте заголовка. Затем я добавил нижний колонтитул с относительным положением и высотой и смещал нижний край #main на высоту нижнего колонтитула. Теперь все выглядит хорошо, но проблема в том, что при прокрутке основного содержимого боковая панель прокручивается вместе с ним. Установка #side в позицию: исправлено будет исправлено, но затем вы вернетесь туда, где я начал. – parliament

100% высоты работает только тогда, когда родитель элемент имеет явное значение высоты. Вы можете достичь 100% высоты, установив высоту 100% на элемент html, элемент тела и любые другие элементы контейнера между ними. Например,

<html style="height: 100%;"> 
    <body style="height: 100%;"> 
    <div id="page" style="height: 100%;"> 
     <div id="sidebar" style="height: 100%; float: left;">content</div> 
     <div id="main" style="height: 100%; float: left;">content</div> 
    </div> 
    </body> 
</html>

источник

2013-02-22 20:52:42 Eric

Спасибо за ответ. Вот ваше предложение не работает http: // jsfiddle.net/Cn29j/И кроме того, я не могу установить #page или #main в вашем примере на 100%, потому что #main имеет динамическую высоту, зависящую от того, сколько контента загружено. – parliament

100% не означает высоту экрана, это означает высоту документа, поэтому динамическая высота не изменяется. –

Ниже код будет работать

$(function(){ 

    if (!!$('#sidebar').offset()) { 

    var stickyTop = $('#sidebar').offset().top; 

    $(window).scroll(function(){ 

     var windowTop = $(window).scrollTop(); 

     if (stickyTop < windowTop){ 
     $('#sidebar').addClass('leftsidebarfixed'); 
     $('#main').addClass('content_fixedsec'); 
     } 
     else { 
      $('#sidebar').removeClass('leftsidebarfixed'); 
      $('#main').removeClass('content_fixedsec'); 
     } 

    }); 

    } 

}); 

.leftsidebarfixed { 
    position: fixed; 
    top: 0; 
} 
body .container .content_fixedsec{ 
    float: right; 
}

источник

2017-03-28 04:37:31 user7393779

Fixed боковая панель закреплена между колонтитулами

ответ

Смежные вопросы