На веб-странице, как я могу иметь полосу прокрутки только для определенного раздела?

После получения this-wap-t">этот вопрос ответил, у меня есть страница, которая выглядит так.

 <div style="white-space: nowrap;">
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
 </div>

Эта страница, если есть много промежутков, не будет перенесена, и она будет продолжать идти горизонтально на странице и даст мне горизонтальную полосу прокрутки. Внутри каждого диапазона у меня есть html-таблица, но я не уверен, что это важно для вопроса.

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

В качестве примера, если вы возьмете trello (см. скриншот ниже). Если у вас есть очень длинный раздел по вертикали, добавьте вертикальную полосу прокрутки ТОЛЬКО в этот раздел, поэтому всю страницу не нужно прокручивать вниз.

В моем случае внутри каждого промежутка находится html-таблица. Каков рекомендуемый способ реализации вертикальной полосы прокрутки только для этой таблицы (а не для всей страницы)?

введите здесь описание изображения


html css vertical-scrolling horizontal-scrolling
person leora    schedule 16.01.2014    source источник
comment
overflow: scroll на родителя? нужно будет определить высоту/максимальную высоту   -  person David Nguyen    schedule 16.01.2014
comment
@DavidNguyen - спасибо, Дэвид, но очевидно, что это не то, что делает скриншот, потому что вертикальная полоса прокрутки применяется только к этому конкретному столбцу, который кажется более элегантным, чем жесткое кодирование максимальной высоты на странице.   -  person leora    schedule 16.01.2014
comment
ммм, это именно то, что происходит - в столбце есть прокрутка переполнения. Максимальная высота будет применяться к обертке отрезков, а не к телу страницы.   -  person David Nguyen    schedule 16.01.2014
comment
когда вы говорите родитель, вы говорите о div или span? Я предположил, что вы имели в виду div?   -  person leora    schedule 17.01.2014

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужны max-height и overflow-y для внутренних элементов, и вам нужно установить размеры для внешних элементов:

HTML

<div class="outer">
    <div class="inner">foo</div>
    <div class="inner">bar</div>
    <div class="inner">whatever</div>
</div>

CSS

.outer {
    border: 2px solid red;
    float:left;
    top:0;
    bottom:0;
    position:absolute;
}
.inner {
    max-height:100%;
    overflow-y:auto;
    border: 2px solid blue;
    width:30%;
    margin-right:2%;
    float:left;
}

Вот рабочая скрипка

person elixenide    schedule 16.01.2014
comment
это шаг в правильном направлении, но меня беспокоит этот подход, потому что мне нужно жестко закодировать эту максимальную высоту, где я действительно хочу, чтобы максимальная высота текущей высоты экрана не вызывала появления вертикальной полосы прокрутки. Кроме того, в идеале снова хотелось бы, чтобы этот раздел прокручивался, как на скриншоте выше. - person leora; 16.01.2014
comment
Потому что в других разделах НИКОГДА не будет элементов более чем на 1 страницу, или вы ХОТИТЕ, чтобы другие разделы вызывали полосу прокрутки для всей страницы? - person ganders; 16.01.2014
comment
Логика все еще работает, но вам понадобится JavaScript, чтобы получить текущую высоту экрана. Просто получите эту высоту с чем-то вроде $(window).height() (jQuery) и обновите стиль с этим значением, как в $('div.some_class_name_relevant_to_this_div').css('max-height', ( $(window).height() - 10) +'px');. - 10 просто дает вам некоторый буфер; настроить в соответствии с вашими потребностями. - person elixenide; 16.01.2014
comment
@ganders - я в основном хочу, чтобы он работал как Trello, где, если столбец (или таблица в моем случае) длиннее страницы, чем вертикальная полоса прокрутки только для этого раздела (как на скриншоте выше). поэтому, если 3 столбца больше размера экрана, должно быть 3 вертикальных полосы прокрутки. - person leora; 17.01.2014
comment
@ Эд Коттрелл - см. мой комментарий к гусакам. Надеюсь, это немного прояснит мое требование - person leora; 17.01.2014
comment
Я переписал свой ответ и предоставил рабочую скрипку. Дайте мне знать, если это не сработает! - person elixenide; 17.01.2014

arrow_upward

arrow_downward

person    schedule
comment
что вы подразумеваете под: what_wraps_your_span. вы говорите о div в моем вопросе или о самом диапазоне? - person leora; 17.01.2014