прокручиваемый div внутри контейнера

У меня есть следующий HTML: http://jsfiddle.net/fMs67/. Я бы хотел, чтобы div2 соблюдал размер div1 и прокручивал содержимое div3.

Это возможно?

Благодарю!

UPDATE-1:

Это более сложный случай, который я упростил, когда задал вопрос: http://jsfiddle.net/Wcgvt/. Мне нужно каким-то образом, чтобы заголовок + это sibling div не переполнял родительский размер div.

Ответ 1

Добавление position: relative родителя и max-height:100%; на div2 работает.

<div id="div1" style="height: 500px;position:relative;">
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
        <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
    </div>
</div>

</body>

Обновление. Ниже приведен пример "обновленный" и ответ. http://jsfiddle.net/Wcgvt/181/

Секрет заключается в использовании box-sizing: border-box и некоторых дополнений, чтобы сделать вторую высоту div 100%, но перемещайте ее вниз на 50 пикселей. Затем заверните содержимое в div с overflow: auto чтобы содержать полосу прокрутки. Обратите внимание на z-индексы, чтобы сохранить весь текст по выбору - надеюсь, что это поможет, спустя несколько лет.

Ответ 2

Если вы поместите overflow: scroll по фиксированной высоте div, div будет прокручиваться, если содержимое занимает слишком много места.

Ответ 3

Вместо overflow:auto, попробуйте overflow-y:auto. Должно работать как шарм!

Ответ 4

Это то, что вы хотите?

<body>
   <div id="div1" style="height: 500px;">
     <div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
       <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
     </div>
   </div>

http://jsfiddle.net/fMs67/1/

Ответ 5

Я только что добавил (переполнение: прокрутка;) в (div3) с фиксированной высотой.

см. скрипку: - http://jsfiddle.net/fMs67/10/

Ответ 6

function start() {
	document.getElementById("textBox1").scrollTop +=5;
    scrolldelay = setTimeout(function() {start();}, 40);
}

function stop(){
	clearTimeout(scrolldelay);
}

function reset(){
	var loc = document.getElementById("textBox1").scrollTop;
	document.getElementById("textBox1").scrollTop -= loc;
	clearTimeout(scrolldelay);
}
//adjust height of paragraph in css
//element textbox in div
//adjust speed at scrolltop and start

Ответ 7

Я создал расширенную версию, основанную на скрипке Трей Копленд, которая, я думаю, больше похожа на то, что вы хотели. Добавлено здесь для будущих ссылок на тех, кто приезжает сюда позже. Пример скрипта

    <body>
<style>
.modal {
  height: 390px;
  border: 5px solid green;
}
.heading {
  padding: 10px;
}
.content {
  height: 300px;
  overflow:auto;
  border: 5px solid red;
}
.scrollable {
  height: 1200px;
  border: 5px solid yellow;

}
.footer {
  height: 2em;
  padding: .5em;
}
</style>
      <div class="modal">
          <div class="heading">
            <h4>Heading</h4>
          </div>
          <div class="content">
              <div class="scrollable" >hello</div>
          </div>
          <div class="footer">
            Footer
          </div>
      </div>
    </body>

Ответ 8

Самый простой способ как в этом примере:

<div>
   <div style=' height:300px;'>
     SOME LOGO OR CONTENT HERE
   </div>
   <div style='overflow-x: hidden;overflow-y: scroll;'> 
      THIS IS SOME TEXT
   </DIV>

Вы можете увидеть тестовые примеры на: https://www.w3schools.com/css/css_overflow.asp