Нет прокрутки на Div внутри другого Div

Как я могу получить прокрутку для работы над div внутри другого div?Нет прокрутки на Div внутри другого Div

Вот мой пример кода, и вот a link to a fiddle показывает результат:

EDIT: Я знаю, что могу сделать скроллинг на внешнем DIV, но я не хочу (например, название будет прокручиваться прочь то, и я хотел бы сохранить его там).

<body style="background-color:gray"> 
    <div id="outerDiv" style="background:white;height:200px"> 
     <h4 class="sideTable">Outer Div</h4> 
     <div id="innerDiv" syle="overflow: auto"> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
      Foo<br /> 
     </div> 
    </div> 
</body>

источник

2014-01-22 Pharylon

Проблема заключается в том, что прокрутка работает только в том случае, если внешний div установлен на высоту 100%. Поэтому, если вы не хотите этого делать, вам нужен другой, вмещающий div? Там может быть лучше, но это работает для меня (fiddle link):

<body style="background-color:gray"> 
    <div id="outerDiv"> 
     <h4 class="sideTable">Outer Div</h4> 
     <div id="holdingDiv"> 
      <div id="innerDiv"> 
       Foo1<br /> 
       Bar1<br /> 
       Foo2<br /> 
       Bar2<br /> 
       Foo3<br /> 
       Bar3<br /> 
       Foo4<br /> 
       Bar4<br /> 
       Foo5<br /> 
       Bar5<br /> 
       Foo6<br /> 
       Bar6<br /> 
      </div> 
     </div> 
    </div> 
</body>

И КСС:

#outerDiv { 
    background:white; 
    height:200px; 
    overflow:hidden; 
} 

#holdingDiv { 
    height:100%; 
} 


#innerDiv { 
    overflow:auto; 
    height:100px 
}

источник

2014-01-22 17:31:38 Pharylon

http://jsfiddle.net/justtal/kQkd9/3/

просто дать: outerDiv

overflow-y: scroll

прокрутки будет отображаться скроллер, даже если нет никакой необходимости.

Вы можете сделать также "авто"

Вы также получили ошибку:

в #innerDiv начертанием => стиль

источник

2014-01-22 17:12:48 justtal

На самом деле, даже с помощью 'переполнения: auto' на элементе #outerDiv будет работать, так как он дал ему явную высоту, а затем полоса прокрутки появится только в том случае, если содержимое больше, чем div. – justis

Добавьте следующий CSS:

#outerDiv{ 
    overflow:auto; /* Displays scroll only when the contents exceed the containers width or height specified */ 
}

Demo

Также я исправила HTML:

который был - <div id="innerDiv" syle="overflow: auto">X

To - <div id="innerDiv">

Другие варианты перелива

переполнение: прокрутка; // Всегда показывать Свиток

переполнение: скрыто; // скрыть прокручивать

Для только горизонтальной прокрутки использования Переполнение-х и только вертикальной прокрутки использования переполнения у

источник

2014-01-22 17:13:59 Zword

Вы складывали overflow:auto в неправильный элемент. Добавьте его в #outerDiv.

EXAMPLE HERE

#outerDiv { 
    background:white; 
    height:200px; 
    overflow: auto; 
}

Используя значение auto является лучшим вариантом, так как полоса прокрутки появляется только в случае, если высота не исправить, содержащие элементы. Использование scroll всегда приведет к появлению полосы прокрутки независимо.

источник

2014-01-22 17:14:03

Нет прокрутки на Div внутри другого Div

ответ

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