Позиция Absolute + Scrolling

Со следующими HTML и CSS

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

Ответы

Ответ 1

Вам нужно обернуть текст в элементе div и включить в него абсолютно позиционированный элемент.

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

Css:

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

Установка внутренней позиции div на relative делает элементы позиции, находящиеся внутри нее, основывать на ней свое положение и высоту, а не на div .container, который имеет фиксированную высоту. Без внутреннего, относительно расположенного div, div .full-height всегда будет вычислять свои размеры и положение на основе .container.

http://jsfiddle.net/M5cTN/

Ответ 2

position: fixed; решит вашу проблему. В качестве примера рассмотрим мою реализацию наложения фиксированной области сообщений (заполненной программно):

#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

И в HTML

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

Когда #data становится больше, чем sceen, #mess сохраняет свое положение на экране, а #data прокручивается под ним.

Ответ 3

Итак, правильно, но если вы ищете элемент полной высоты, который не прокручивается с содержимым, а на самом деле является высотой контейнера, здесь исправление. У родителя с высотой, которая вызывает переполнение, контейнер содержимого, который имеет высоту 100% и overflow: scroll, а потом может быть размещен в зависимости от размера родителя, а не от размера элемента прокрутки. Вот скрипка: http://jsfiddle.net/M5cTN/196/

и соответствующий код:

HTML:

<div class="container">
  <div class="inner">
    Lorem ipsum ...
  </div>
  <div class="full-height"></div>
</div>

CSS

.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}