Фиксация левой и правой колонки при прокрутке страницы

Question

Подскажите, пожалуйста, как зафиксировать левую и правую колонки при прокрутке страницы? При использовании Fixed блоки съезжают...

.layout {
  margin: 0 auto;
  max-width: 950px;
}

.col1 {
  background: #C7E3E4;
  width: 215px;
  float: left;
  height: 500px;
}

.col2 {
  background: #E0D2C7;
  width: 500px;
  float: left;
  height: 1500px;
}

.col3 {
  background: #ECD5DE;
  width: 215px;
  float: left;
  height: 500px;
}

<div class="layout">
  <div class="col1"> </div>
  <div class="col2"> </div>
  <div class="col3"> </div>
</div>

Answer 1

Используйте position: sticky;

Пример

.layout {
  margin: 0 auto;
  max-width: 950px;
}

.layout::after {
  content: '';
  display: table;
  clear: both;
}

.col1,
.col3 {
  position: sticky; top: 0; left: 0;
}

.col1 {
  background: #C7E3E4;
  width: 215px;
  float: left;
  height: 500px;
}

.col2 {
  background: #E0D2C7;
  width: calc(100% - 215px * 2);
  float: left;
  height: 1500px;
}

.col3 {
  background: #ECD5DE;
  width: 215px;
  float: left;
  height: 500px;
}

<div class="layout">
  <div class="col1"> </div>
  <div class="col2"> </div>
  <div class="col3"> </div>
</div>

БЛОГ НА HUSL

Фиксация левой и правой колонки при прокрутке страницы

Ответы (1 шт):