CSS: як отримати смуги прокрутки для div всередині контейнера фіксованої висоти

92

У мене є така розмітка:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

CSS виглядає так:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

Завдяки своєму вмісту висота, div.Contentяк правило, більша, ніж передбачений div.FixedHeightContainer. На даний момент div.Contentвесело простягається з дна div.FixedHeightContainer- зовсім не те, що я хочу.

Як я можу вказати, що div.Contentотримує смуги прокрутки (бажано лише вертикальну, але я не метушливо), коли її висота занадто велика, щоб її помістити?

overflow:autoі overflow:scrollнічого не роблять, з якихось химерних причин.

css scrollbar overflow

— Девід
джерело

154

встановлюючи overflowповинен подбати про це, але потрібно встановити і висоту Content. Якщо атрибут висоти не встановлений, div зростатиме вертикально на стільки, скільки йому потрібно, і смуги прокрутки звичайно не потрібні.

Див. Приклад: http://jsfiddle.net/ftkbL/1/

— Dutchie432
джерело

Добре, дякую. Тож мені потрібно вказати висоту для div.Content? Я припустив, що з контейнера це вирішить, що він не вміститься, і застосую смуги прокрутки на цій основі.

— Девід

6

Якщо ви даєте Contentфіксовану висоту, ви не повинні давати FixedHeightContainerфіксовану висоту, тому що ви не можете знати, наскільки високим буде ваш титул, тому Contentможуть бути витіснені. Див .: jsfiddle.net/ftkbL/2 Ви повинні встановити фіксовану висоту лише для елемента за допомогою overflow: scroll. Див. Jsfiddle.net/ftkbL/3 або jsfiddle.net/ftkbL/4

— RoToRa

Я бачу вашу думку (з першого посилання), але текст заголовка відомий і занадто короткий, щоб його можна було перебити, якщо користувач не надув текст до непрактичного розміру.

— Девід

Чи є спосіб мати коротку висоту і одночасно приховати смугу прокрутки? таким чином, коли користувачі перетягуватимуть мобільні пристрої, вони побачать, що вони прокручують вниз, але без громіздкості бачити 2 смуги прокрутки у своєму браузері?

— klewis

@blackhawk - Не те, що я знаю. Для цього вам може знадобитися використовувати Javascript. Зокрема, я думаю про бібліотеку jQuery Draggable: jqueryui.com/draggable -одне, що слід врахувати, це ... як користувачі робочих столів знатимуть прокрутку?

— Dutchie432

2

FWIW, ось мій підхід = простий, який працює для мене:

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}

— Джон Лав
джерело

1

Код із наведеної вище відповіді Dutchie432

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}

— Charitha Goonewardena
джерело

-2

користуватися overflowмайном

overflow: hidden; 

overflow: auto;

overflow: scroll;

— бісма
джерело