Иметь фиксированную позицию div, которую нужно прокручивать, если содержимое переполняется


150

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

У меня есть фиксированное положение div на левой стороне прокрутки для меню. Правая сторона - это стандартный div, который правильно прокручивается. Проблема в том, что когда порт просмотра браузера слишком мал, чтобы видеть все меню ... нет способа заставить его прокрутить, что я могу найти (по крайней мере, с помощью css). Я пытался использовать различные переполнения в CSS, но ничто не делает прокрутку div. Для div, содержащего меню, задано значение min-height: 100% и position: fixed ... оба атрибута, которые мне нужно сохранить.

Div, содержащий меню, находится внутри другого div-оболочки, который расположен абсолютно, а высота установлена ​​на 100%.

Как я могу заставить его прокручиваться по вертикали, если содержимое слишком высокое для div?

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

Какие-либо решения? Возможно, нужен javascript? (о котором я мало знаю)

Пример JS Fiddle

и соответствующий код, который вызывает проблему (так как публикация всей статьи здесь слишком длинная):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

Также попытался добавить высоту: 100%, просто чтобы посмотреть, если это было проблемой, но она тоже не работала ... и не работала с фиксированной высотой, такой как 600px.


Пожалуйста, опубликуйте jsfiddle с html и css, которые вы используете в данный момент, чтобы мы могли увидеть проблему. Спасибо!
mchail

3
Вы пробовали переполнение: авто; ?
Дан

Да переполнение: авто или переполнение-у: прокрутка или переполнение: прокрутка все не позволяют прокрутить фиксированный div.
Фабрика

Причиной необходимости прокрутки является то, что у div есть слишком много содержимого в его определенной длине. Если порт просмотра в браузере сжимается, это не приведет к тому, что div все равно заставит прокрутить действие.
Дан

Невозможно опубликовать JSfiddle и html / css, потому что это просто слишком долго, и они не позволяют опубликовать ссылку JSfiddle без кода. :( Я разместил только кусок кода, который, кажется, не помогает прокрутке div ... и ссылку на все это.
TCD Factory

Ответы:


245

Проблема с использованием height:100%состоит в том, что это будет 100% страницы вместо 100% окна (как вы, вероятно, ожидаете). Это вызовет проблему, которую вы видите, потому что нефиксированный контент достаточно длинный, чтобы включать фиксированный контент с высотой 100% без полосы прокрутки. Браузер не знает / не заботится о том, что вы не можете прокрутить эту полосу вниз, чтобы увидеть ее

Вы можете использовать, fixedчтобы выполнить то, что вы пытаетесь сделать.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Эта вилка вашей скрипки показывает мое исправление: http://jsfiddle.net/strider820/84AsW/1/


Работал. Мне это нужно для адаптации статьи Codrops. Некоторым, возможно, придется использовать левое и правое значение 0. Спасибо большое, удачи
Сантьяго Байгоррия

19
Если вы установите для «overflow-y» значение «Авто», полоса прокрутки исчезнет, ​​когда содержимое находится в области просмотра. Другими словами, если он не переполняется, полоса прокрутки не будет, а когда она переполнится, будет полоса прокрутки.
поезд

Верный. Я просто использовал его CSS и исправлял то, что действительно было сломано. Похоже, он уже нашел ответ на этот вопрос в своем вопросе.
strider820

3
работал! отличное решение. Я до сих пор не понимаю: 0 часть .. Вы могли бы объяснить, пожалуйста?
Джанлука Геттини

5
Добавление top: 0 и bottom: 0, оставляя высоту в фиксированном элементе позиции, заставляет браузер растянуть элемент так, чтобы вершина была на 0, а нижняя была на 0.
strider820

6

Вот оба исправления.

Во-первых, что касается фиксированной боковой панели, вам нужно задать ей высоту для переполнения:

HTML-код:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

Код CSS:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

Живой пример: http://jsfiddle.net/RWxGX/3/

Невозможно НЕ получить полосу прокрутки, если ваш контент переполняет высоту div. Вот почему я добавил медиа-запрос для высоты экрана. Может быть, вы можете настроить стили для коротких размеров экрана, чтобы прокрутка не появлялась.

Ура, Игнасио


Посмотрите пример JSFiddle, который я разместил. Вы увидите проблему.
TCD Factory

Это не работает в старых браузерах, таких как Mobile Safari для iOS 4.2
mheavers,

4

Вообще говоря, фиксированный участок должен быть установлен с width, heightи top, bottomсвойства, в противном случае она не будет признавать его размер и положение.

Если используемый ящик является прямым потомком для тела и имеет соседей, то имеет смысл проверить z-indexи top, leftсвойства, так как они могут перекрывать друг друга, что может повлиять на наведение мыши при прокрутке содержимого.

Вот решение для блока контента (прямого потомка bodyтега), который обычно используется вместе с мобильной навигацией.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Надеюсь, это кому-нибудь поможет. Спасибо!


3

Решения здесь не работают для меня, так как я разрабатываю компоненты реакции.

Что работало, хотя для боковой панели было

.sidebar{
position: sticky;
top: 0;
}

Надеюсь, это кому-нибудь поможет.


Я годами редактировал CSS и понятия не имел об атрибуте sticky position. Спасибо за это, отлично работал и для моей реализации!
1owk3y

0

Оставить ответ для тех, кто хочет сделать что-то подобное, но в горизонтальном направлении, как я и хотел.

Тонкая настройка ответа @ strider820 , как показано ниже, сделает волшебство:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

Вот и все. Также проверьте этот комментарий, где @train объяснил использование overflow:autoover overflow:scroll.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.