Получение горизонтальной полосы прокрутки внутри 100% div

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

Я настроил его прямо сейчас с внутренним div с фиксированной шириной (чтобы плавающие «дневные» div не возвращались ниже) и внешним div, для которого задана ширина: 100%. Я бы ХОТЕЛ, чтобы внешний div прокручивался горизонтально, если размер страницы изменен так, что внутренний div больше не помещается в нее, но вместо этого внешний div фиксируется больше по ширине внутреннего div, а сама страница прокручивается.

Гах, я не умею объяснять такие вещи... Вот немного кода, который может это прояснить..

CSS:

.cal_scroller {
    padding: 0;
    overflow: auto;
    width: 100%;
}

.cal_container {
    width: 935px;
}

.day {
    border: 1px solid #999;
    width: 175px;
    height: 200px;
    margin: 10px;
    float: left;
}

и (упрощенная) структура:

<div class="cal_scroller">
    <div class="cal_container">
        <div class="day">Monday</div>
        <div class="day">Tuesday</div>
        <div class="day">Wednesday</div>
        <div class="day">Thursday</div>
        <div class="day">Friday</div>
    </div>
</div>

Итак, чтобы попробовать еще раз - я бы хотел, чтобы cal_scroller div всегда был шириной страницы, но если размер браузера изменен так, что cal_container больше не подходит, я хочу, чтобы он прокручивался ВНУТРИ контейнера. Я могу заставить все это работать, если я установлю фиксированную ширину для cal_scroller, но это явно не то поведение, к которому я стремлюсь. Я бы предпочел не использовать какие-либо читы javascript для настройки ширины div, если мне это не нужно.


scroll css
person Matt Brunmeier    schedule 17.07.2009    source источник
comment
Извините все, это моя проблема. Я просто поместил код в отдельный файл, и он отлично работает. В моем документе есть еще какие-то глупости, которые нарушают это. Извините!   -  person Matt Brunmeier    schedule 17.07.2009

Ответы (4)


arrow_upward
6
arrow_downward

Ваш класс cal_scroller имеет ширину 100% + 20px (отступы). Вместо этого используйте поле для cal_container, например:

.cal_scroller {
    padding: 10px 0;
    overflow: auto;
    width: 100%;
}

.cal_container {
    margin: 0 10px;
    width: 935px;
}

См. здесь описание того, как работает блочная модель (короче говоря, все находится за пределами ширины/высоты элемента).

Кроме того, блочные элементы (такие как <div>s) по умолчанию имеют ширину 100%, что делает ваше объявление ширины 100% излишним.

person Noah Medling    schedule 17.07.2009
comment
Хороший улов, но удаление отступов не решает проблему. Страница по-прежнему прокручивается вместо div прокрутки - person Matt Brunmeier; 17.07.2009

arrow_upward
2
arrow_downward

Одна проблема, которую я вижу, это ваше правило width: 100%. div.cal_scroller уже является блочным элементом, поэтому по умолчанию он заполняет всю ширину страницы. (Не говоря уже о том, что отступы добавляются по верху ширины, так что в итоге вы получите этот div больше, чем страница.)

Просто избавьтесь от этого правила ширины, и вы станете золотым. (Я только что попробовал сам, и это сработало как шарм.)

person Plutor    schedule 17.07.2009
comment
Я удалил ширину: 100%; и это ничего не изменило. Как говорили люди, это избыточно, но я надеялся, что это поможет описать то, что я пытаюсь сделать (я НЕ хочу устанавливать фиксированную ширину для прокручиваемого div). У вас есть прокрутка в div прокрутки, когда размер окна был изменен (в отличие от прокрутки всей страницы) ?? - person Matt Brunmeier; 17.07.2009

arrow_upward
2
arrow_downward

Я не очень внимательно прочитал ваш вопрос, но когда у вас есть width: 100% и padding, это обычно не то, что вам нужно.

100% + 20px > 100% - это может быть проблемой.

person mveerman    schedule 17.07.2009

arrow_upward
1
arrow_downward

Я много боролся с этим, но самым простым решением, которое я нашел, было добавление:

.cal_container { white-space: nowrap; }

Таким образом, вам не нужно указывать ширину вообще. Это просто гарантирует, что все останется в одной строке.

person MarvinVK    schedule 15.09.2016