Скролл страницы с фиксацией DIV

Question

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

.page {
  width: 600px;
}

.header,
.footer {
  border: 1px solid #000;
  padding: 10px;
}

.left {
  width: 150px;
  border: 1px solid #000;
  float: left;
}

.right {
  width: 150px;
  float: right;
  padding: 3px;
}

.content {
  margin: 0px 160px;
  padding: 10px 0px;
  border: 1px solid #000;
}

.right .main_div {}

.right .main_div div {
  border: 1px solid #000;
  margin-bottom: 10px;
  padding: 10px;
  background: #CCC;
}

<div class="page">
  <div class="header">HEADER</div>
  <div class="center">
    <div class="left">left</div>
    <div class="right">
      <div class="main_div">
        <div>Тестовый текст для небольшого примера</div>
        <div>Тестовый текст для небольшого примера</div>
        <div>Тестовый текст для небольшого примера</div>
        <div>Тестовый текст для небольшого примера</div>
        <div>Тестовый текст для небольшого примера</div>
        <div>Тестовый текст для небольшого примера</div>
      </div>
    </div>
    <div class="content">
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

Answer 1

Добавить position: fixed;bottom: 0; в фиксируемый блок.

.page {
  width: 600px;
}

.header,
.footer {
  border: 1px solid #000;
  padding: 10px;
}

.left {
  width: 150px;
  border: 1px solid #000;
  float: left;
}

.right {
  width: 150px;
  float: right;
  padding: 3px;
}

.content {
  margin: 0px 160px;
  padding: 10px 0px;
  border: 1px solid #000;
}

.right .main_div     {
  position: fixed;
  bottom: 0;
}

.right .main_div div {
  border: 1px solid #000;
  margin-bottom: 10px;
  padding: 10px;
  background: #CCC;
}

<div class="page">
  <div class="header">HEADER</div>
  <div class="center">
    <div class="left">left</div>
    <div class="right">
      <div class="main_div">
        <div>Тестовый текст для небольшого примера</div>
      </div>
    </div>
    <div class="content">
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
      <p>Прежде всего новая модель организационной деятельности способствует подготовке и реализации поставленных обществом и правительством задач. Прежде всего социально-экономическое развитие в значительной степени обуславливает создание существующий финансовых
        и административных условий. С другой стороны новая модель организационной деятельности требует анализа новых предложений.</p>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

БЛОГ НА HUSL

Скролл страницы с фиксацией DIV

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