Прокручиваемый список не подходит для контейнера

Я пытаюсь создать боковую панель с фиксированной высотой (определенную JS), а внутри нее - div-баннер и прокручиваемый список.Прокручиваемый список не подходит для контейнера

Проблема заключается в том, что я хочу, чтобы полоса прокрутки отображалась только в списке, и я не могу использовать CSS calc() (без поддержки IE8).

Это пример виджета, и вы можете четко видеть проблему.
Этот список выходит на ту же самую высоту баннера.

.sidebar { 
    height: 300px; 
    width: 200px; 
    outline: 1px solid red; 
} 

.banner { 
    background: purple; 
    height: 50px; 
} 

.list { 
    margin: 0; 
    overflow-y: scroll; 
    height: 100%; 
}

http://codepen.io/FezVrasta/pen/tfgHx

Как я могу решить эту проблему без использования JS?

источник

2013-11-27 Fez Vrasta

Вы можете использовать структуру таблицы, как вам нужно остаточную высоту с небывалую высоту заголовка: http://jsfiddle.net/ – nkmol

Не совсем семантически правильно, таблицы должны использоваться только для хранения данных. –

Нет, это неправда. Таблицы HTML должны содержать «табличные данные», это может быть потому, что некоторые читатели экрана ищут эти элементы. Но нет причин, по которым таблицы должны содержать данные, которые будут храниться. Как использование свойств таблицы CSS, вы можете сделать макеты, которые менее строгие, чем таблица HTML. Else, я бы хотел знать, почему это так. – nkmol

Просто назначить фиксированную max-height в список вы можете, потому что вы знаете другие значения:

.list { 
    margin: 0; 
    overflow-y: scroll; 
    max-height: 250px; 
}

демо-http://codepen.io/anon/pen/yetrd

Редактировать

Для динамической высоты боковой панели, но Зная height для баннера, что вы можете сделать, это подделка пространства баннера с помощью этого Свойства:

.list { 
    box-sizing:border-box; 
    position:relative; 
    margin: 0; 
    border-top:50px solid transparent; 
    top:-50px; 
    overflow-y: scroll; 
    height: 100%; 
}

притворяется пространство баннера, как border и negative top в списке вы обеспечиваете всегда это пространство. И obviusly с box-sizing:border-box которым поддерживается на IE8 проверить совместимость here

И новые демо http://codepen.io/anon/pen/DbFel

источник

2013-11-27 14:40:26 DaniP

Нет высоты боковой панели будет переменной (js) –

Хорошо отредактируйте это в своем посте ... если вы уже используете JS, почему вы не можете использовать это для списка – DaniP

, я уже подумал, что я могу 'т сделать calc самостоятельно ... –

Класс баннера является родитель, а класс боковой панели ребенка, поэтому он не может через поток его родители , Может быть, вы можете так поступить, я не уверен, как ваш проект. Но попробуй.

.sidebar { 
    height: 300px; 
    width: 200px; 
    outline: 1px solid red; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

.banner { 
    background: purple; 
    height: 50px; 
    position: relative; 
} 

.list { 
    margin: 0; 
    overflow-y: scroll; 
    height: 100%; 
}

источник

2013-11-27 14:56:22 HICURIN

Прокручиваемый список не подходит для контейнера

ответ

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