Майте фіксовану позицію, яка повинна прокручуватися, якщо вміст переповнюється

Насправді у мене є дві проблеми, але давайте вирішувати першочергове питання першим, оскільки я вважаю, що інше легше вирішити.

У мене ліва частина вікна прокрутки для меню. Права сторона - це стандартний div, який правильно прокручується. Проблема полягає в тому, що коли порт перегляду браузера занадто малий, щоб побачити все меню .. немає ніякого способу змусити його прокручувати те, що я можу знайти (принаймні, не з css). Я намагався використовувати різні переповнення в css, але ніщо не змушує прокручувати div. У розділі, що містить меню, встановлено мінімальну висоту: 100% і положення: фіксовано .. обидва атрибути, які мені потрібно зберегти.

Див, що містить меню, знаходиться всередині іншого розгортаючого дива, який розміщується абсолютно і висота встановлюється на 100%.

Як я можу змусити його прокручувати вертикально, якщо вміст занадто високий для діва?

Це призводить мене до іншого питання, що я не хочу відображати смугу прокрутки .. але я думаю, що я вже можу відповісти на це (тільки це ще не працює, тому що я не можу дозволити діву прокручувати почати з).

Будь-які рішення? Можливо, потрібен javascript? (про що я мало що знаю)

JS Fiddle Приклад

і відповідний код, що спричиняє проблему (оскільки розміщення всього тут тут занадто довго):

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

Також спробував додати висоту: 100%, а також просто перевірити, чи це проблема, але це не спрацювало ... ні фіксовану висоту, наприклад 600px.

Проблема з використанням 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/

Ось обидва виправлення.

По-перше, що стосується нерухомої бічної панелі, потрібно надати їй висоту для переповнення:

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/

Неможливо НЕ отримати смугу прокрутки, якщо ваш вміст переповнює висоту розділу. Ось чому я додав медіа-запит щодо висоти екрана. Можливо, ви можете налаштувати свої стилі для коротких розмірів екрана, щоб прокрутка не з’являлася.

Ура, Ігнасіо

Взагалі кажучи, фіксований ділянку повинен бути встановлений з 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;
}

Сподіваюсь, це допоможе комусь. Дякую!

Рішення тут не спрацювали для мене, оскільки я стилю реагуючих компонентів.

Те, що працювало, хоча і для бічної панелі

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

Сподіваюся, що це комусь допоможе.

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

Відповідь Tweaking @ 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:autoнад overflow:scroll.