Почему `overflow: auto;` не заставляет элемент прокручиваться, даже если его содержимое переполняется?

Question

Почему `overflow: auto;` не заставляет элемент прокручиваться, даже если его содержимое переполняется?

0

Почему настройка overflow: auto; на элементе не вызвать его прокрутку даже при переполнении содержимого?

У меня есть расположение двух столбцов с фиксированным левым столбцом и прокручиваемым правым столбцом. Правый столбец установлен на overflow: auto; , и у него есть дочерний div.content. Если я установил минимальную высоту выше окна, полоса прокрутки не появится. Если я div.content минимальную высоту для своего дочернего div.content, div.content появится полоса прокрутки.

Почему это? Почему полоса прокрутки не появляется, когда минимальная высота установлена на main?

Здесь скрипка: http://jsfiddle.net/gT8tq/1/

<div class="page-wrapper">
    <aside>
        <p>Fixed</p>
    </aside>
    <main>
        <section class="content">
            <p>Scroll</p>
        </section>
    </main>
</div>

Стили...

html, body {
    height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
}
.page-wrapper {
    bottom: 0; left: 0; right: 0; top: 0;
    position: absolute;
    z-index: 100;
}
aside, main {
    bottom: 0; top: 0;
    padding: 20px;
    position: absolute;
}
aside {
    background-color: #eee;
    left: 0;
    width: 30%;
}
main {
    background-color: #ccc;
    left: 30%; right: 0;
    overflow: auto;
    /* Here is the issue; uncommenting this breaks scrolling; Why? */
    /* min-height: 1000px; */
}
.content {
    min-height: 1000px;
}

Jumbalaya Wanton 29 нояб. 2013, в 17:03

Источник

0

Вы имеете в виду overflow: auto ? Там нет свойства под названием scroll .
BoltClock♦ 29 нояб. 2013, в 16:00
0

Да, извините, обновлено.
Jumbalaya Wanton 29 нояб. 2013, в 16:02
0

div.content - это не div, а раздел: <section class = "content"> <p> Я прокручиваю ... </ p> </ section>, поэтому section.content
Tom Chung 29 нояб. 2013, в 16:12

Показать ещё 1 комментарий

Теги:

html

css

scroll

4 ответа

3

В вашем CSS,

html, body {
    height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
}

Это означает, что независимо от того, как высота переполняет элемент тела, полоса прокрутки не появится.

Кроме того, требуется overflow: auto в основном элементе, потому что на самом деле полоса прокрутки принадлежит основному элементу, а не элементу тела по умолчанию.

main {
    background-color: #ccc;
    left: 30%; right: 0;
    overflow: auto;
}

Если вы не хотите overflow: hidden в элементе body, вы должны установить положение: зафиксировано в сторону элемента.

Проверьте это на http://jsfiddle.net/gT8tq/4/

Tom Chung 29 нояб. 2013, в 14:21

0

Что значит установка position: relative; на .content достичь? И чего же добиться, aside перехода от absolute , в моем случае, к fixed , в вашем случае?
Jumbalaya Wanton 29 нояб. 2013, в 16:15
0

Я предоставляю два метода, которые могут достичь более или менее одного и того же.
Tom Chung 29 нояб. 2013, в 16:19
0

В вашем случае, поскольку исходная полоса прокрутки является «основным» элементом, элемент «в сторону» не будет прокручиваться.
Tom Chung 29 нояб. 2013, в 16:21
0

В моем случае с jsfiddle источником полосы прокрутки является элемент body. Тот же эффект, но просто показывает вам другой способ достичь визуально того же самого.
Tom Chung 29 нояб. 2013, в 16:24

Показать ещё 2 комментария

1

Это потому, что вы задаете поведение для определенного элемента, в данном случае <main>. Что делать <main>, когда содержимое больше, чем сам элемент?

В этом случае вы говорите, что в этом случае должны создавать полосы прокрутки. Если вы положили overflow: auto; на странице-обертке он будет делать то, что вы ожидаете, потому что тогда вы скажете, что div, что делать, когда содержимое переполняется.

Это имеет смысл или вам нужно больше разъяснений?

Sander Koedood 29 нояб. 2013, в 14:21

0

Я не уверен, что следую за тобой. В существующем состоянии main overflow: auto; разве это не говорит, что if your contents overflow, show scrollbars ? Откуда берется обертка страницы?
Jumbalaya Wanton 29 нояб. 2013, в 16:09
0

Это именно то, что это значит. Если значение .content get больше, чем main, значит high, то будут показаны полосы прокрутки.
Sander Koedood 29 нояб. 2013, в 16:12

0

Вы не использовали position:relative; для .content проверить это: http://jsfiddle.net/gT8tq/2/

Omid 29 нояб. 2013, в 14:22

0

Мне даже не нужно этого делать. Я мог бы просто удалить минимальную высоту из main и это работает. Что меня интересует, так это то, почему это происходит. Не решение.
Jumbalaya Wanton 29 нояб. 2013, в 16:06
0

потому что height и width html blocks по умолчанию являются auto , и в некоторых случаях blocks могут заполнять свою область контейнера без какого-либо кода. как тег body
Omid 29 нояб. 2013, в 16:09

Ещё вопросы

Вы имеете в виду overflow: auto ? Там нет свойства под названием scroll .
div.content - это не div, а раздел: <section class = "content"> <p> Я прокручиваю ... </ p> </ section>, поэтому section.content
Что значит установка position: relative; на .content достичь? И чего же добиться, aside перехода от absolute , в моем случае, к fixed , в вашем случае?
Я предоставляю два метода, которые могут достичь более или менее одного и того же.
В вашем случае, поскольку исходная полоса прокрутки является «основным» элементом, элемент «в сторону» не будет прокручиваться.
В моем случае с jsfiddle источником полосы прокрутки является элемент body. Тот же эффект, но просто показывает вам другой способ достичь визуально того же самого.
Я не уверен, что следую за тобой. В существующем состоянии main overflow: auto; разве это не говорит, что if your contents overflow, show scrollbars ? Откуда берется обертка страницы?
Это именно то, что это значит. Если значение .content get больше, чем main, значит high, то будут показаны полосы прокрутки.
Мне даже не нужно этого делать. Я мог бы просто удалить минимальную высоту из main и это работает. Что меня интересует, так это то, почему это происходит. Не решение.
потому что height и width html blocks по умолчанию являются auto , и в некоторых случаях blocks могут заполнять свою область контейнера без какого-либо кода. как тег body

BoltClock · Accepted Answer · 2013-11-29T13-21-00.000Z

Когда вы устанавливаете min-height: 1000px на свой main элемент, то, что заканчивается, заключается в том, что его содержимое больше не переполняет его, потому что оно теперь достигает 1000 пикселей. Обратите внимание, что min-height имеет приоритет, даже если вы привязали main элемент к границам страницы, используя абсолютное позиционирование и bottom: 0; top: 0 bottom: 0; top: 0, просто потому, что это приводит к тому, что main элемент имеет высоту менее 1000 пикселей. Затем происходит то, что элемент остается привязанным к вершине в соответствии с его top координатой и переполняется вниз, потому что он чрезмерно ограничен из-за min-height; детали всего этого документируются в разделах 10.6.4 и 10.7 спецификации.

Поскольку переполнение больше не происходит на main элементе, ему больше не нужно создавать полосу прокрутки для ее содержимого. main элемент и его содержимое все еще переполняют страницу, как я описал, но так как вы указали overflow: hidden на html, body, страница откажется создать полосу прокрутки для main элемента. Поэтому конечный результат заключается в том, что ни одна полоса прокрутки вообще не создается.

Если вы вынуждаете main создавать вертикальную полосу прокрутки, даже если переполнение не происходит, заменив overflow: auto overflow-y: scroll, вы увидите, что полоса прокрутки фактически выходит за границы страницы, так что вы больше не видите нижний элемент управления ( s) - это доказывает, что добавив min-height вы на самом деле сделали main элемент выше:

main {
    background-color: #ccc;
    left: 30%; right: 0;
    /* overflow: auto; */
    overflow-y: scroll;
    min-height: 1000px;
}