Неприятности с высотой CSS в процентах

Question

Это немного трудно для меня, чтобы объяснить мою проблему, так гораздо лучше просто показать пример (проверьте JSFiddle):

#contacts { 
position: fixed; 
bottom: 0; 
width: 100%; 
max-height: 75%; 
} 
#contacts .tab-content { 
height: 100%; 
overflow: scroll; 
} 

JSFiddle no scroll

Как вы видите, на нижней части есть вкладка, которая переключает панель (я использую Bootstrap 3). Содержимое панели динамически генерируется, поэтому мне нужно, чтобы панель увеличивала свою высоту по мере создания контента, до 75% высоты страницы (чтобы не покрыть все это). Теперь, когда содержимое слишком много, мне нужна внутренняя полоса прокрутки; как вы можете видеть, полоса прокрутки есть, но она не работает, потому что div #contacts не имеет определенной высоты, поэтому «высота: 100%» .tab-content не работает. Если я попробовать использовать «переполнение: прокрутки» на #contacts вместо TAB-содержанием, он работает:

JSFiddle scrolls label too

Но проблема, теперь, является то, что полоса прокрутки также прокручивает вкладки, и что он находится вне содержимого .tab, поэтому, когда я нажимаю на него, div теряет фокус, а вкладка закрывается. Любая идея, как это решить? Благодаря!

Answer 1

Хорошо, так что я снова посмотрел на него, и это действительно боль, но это похоже на работу (немного некрасиво, хотя): Fiddle

#contacts { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    max-height: 75%; 
    overflow-y: hidden; 

} 
#contacts .tab-content { 
    background-color: #ccc; 
} 

.tab-pane { 
    height:300px; 
    overflow-y:scroll; 
} 
#contacts ul li { 
    position: relative; 
    float: right; 
    margin-right: 15%; 
} 
#contacts > ul > li > a { 
    background-color: #ccc; 
} 

Answer 2

Доказательство концепции решения

Я вареные вниз по конструкции проблемы к основам (без Bootstrap).

.fixed-wrapper прикреплен в нижней части страницы, используя position: fixed, и применяет overflow-y: scroll для включения прокрутки.

Элемент тангажа .header также установлен фиксированным, но трюк заключается в том, чтобы установить нижнее смещение на то же значение, что и значение максимальной высоты .fixed-wrapper, 60% в этом примере.

Тогда вы переключаетесь содержание, вам нужно настроить следующее:

.fixed-wrapper { max-height: 0;} 
.header { bottom: 0;} 
.scroll-panel { display: none;} 

Если у вас есть .active класс различать состояние отображения, ваш CSS может выглядеть следующим образом:

.fixed-wrapper.active { max-height: 60%;} 
.fixed-wrapper.active .header { bottom: 60%;} 
.fixed-wrapper.active .scroll-panel { display: bottom;} 

When применяя это к макету Bootstrap, убедитесь, что ваши селекторы достаточно специфичны, чтобы классы Bootstrap не переопределяли ключевые правила, показанные выше.

Примечание: Это решение является незначительным. Если контент недостаточно высок для принудительной прокрутки, элемент заголовка может висеть на позиции 60%, хотя .scroll-panel не достигает максимальной высоты. Возможно, вам понадобится JavaScript, чтобы позаботиться об этом.

body { 
 
    margin: 0; 
 
} 
 
p { 
 
    line-height: 2.0; 
 
} 
 
.fixed-wrapper { 
 
    background-color: lightblue; 
 
    max-height: 60%; 
 
    position: fixed; 
 
    bottom: 0; 
 
    overflow-y: scroll; 
 
} 
 
.header { 
 
    background-color: lightgray; 
 
    position: fixed; 
 
    bottom: 60%; 
 
    right: 0; 
 
    margin-right: 50px; 
 
    width: auto; 
 
} 
 
.scroll-panel { 
 
    background-color: lightblue; 
 
    display: block; 
 
}

<div class="fixed-wrapper"> 
 
    <div class="header">header or tab...</div> 
 
    <div class="scroll-panel"> 
 
     <p>Some content...</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p> 
 
    </div> 
 
</div>