Независимые прокручивающие divs, один с фиксированным заголовком и нижним колонтитулом

У меня есть два независимо прокручивающих divs, один с верхним и нижним колонтитулом.Независимые прокручивающие divs, один с фиксированным заголовком и нижним колонтитулом

<body> 
    <div class="container col-1"> 
    Many listings 
    </div> 
    <div class="container col-2"> 
    <div class="header">Fixed Header</div> 
    <div class="content">Lots of content</div> 
    <div class="footer">Fixed footer</div> 
    </div> 
</body>

Смотрите эту скрипку: https://jsfiddle.net/bhmvv05n/

Проблема заключается в том, что я хотел второй контейнер DIV, чтобы иметь фиксированный верхние и нижние колонтитулы, которые всегда видны и имеет только содержание прокрутки.

Как только я изменяю прокрутку div col-2, два столбца больше не прокручиваются.

Любые советы?

Спасибо!

источник

2016-05-23 ebbishop

Это будет отрегулировано на то, что width у вас есть для ваших столбцов. Идея состоит в том, что вы делаете только .col-2.content прокручиваемым, а не всем .container.

* { 
    box-sizing: border-box; 
} 

html, body { 
    margin: 0; 
    height: 100%; 
} 

.container { 
    height: 100%; 
} 

.col-1{ 
    float: left; 
    width: 33%; 
    overflow: auto; 
} 

.col-2{ 
    float: left; 
    width: 67%; 
    position: relative; 
} 

.col-2 .content { 
    position: absolute; 
    left: 0; right: 0; 
    top: 20px; /* header height */ 
    bottom: 20px; /* footer height */ 
    overflow: auto; 
} 

.header, .footer { 
    height: 20px; 
    background-color: red; 
    position: absolute; 
    left: 0; right: 0; 
} 

.header { 
    top: 0; 
} 

.footer { 
    bottom: 0; 
}

источник

2016-05-23 19:23:00 victmo

Может ли что-то подобное работать для вас?

https://jsfiddle.net/vz7eb8uc/

код изменен;

.col-1{ 
    float: left; 
    width: 33%; 
    position: relative; 

} 
.col-2{ 
    float: left; 
    width: 67%; 
    position: relative; 
} 
.header, .footer { 
    height: 20px; 
    background-color: red; 
    position: fixed; 
    left: 33%; 
    width:67% 
}

источник

2016-05-23 19:14:51 since095

Независимые прокручивающие divs, один с фиксированным заголовком и нижним колонтитулом

ответ

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