ПРИМЕЧАНИЕ : Пожалуйста, смотрите нижнюю часть вопроса для обновления!
Вот выдержка из моего HTML / CSS:
html { height: 100%; }
body
{
height: 100%;
margin: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699CC', endColorstr='#1C3854');
}
.container
{
display: inline-block;
width: 50%;
}
.box
{
width: 80%;
margin-left: auto;
margin-right: auto;
}
и
<body>
<div class="container">
<div class="box">
<!-- content 1 -->
</div>
</div><div class="container">
<div class="box">
<!-- content 2 -->
</div>
</div>
</body>
Эта страница должна работать только в IE8 + (поскольку она работает на SOE).
Когда браузер развернут и / или контента очень мало, полосы прокрутки отсутствуют, как и ожидалось.
Когда браузер маленький и / или в нем много контента, есть полосы прокрутки, но они неактивны. Пользователь не может прокрутить материал за край видимой области.
Я попытался указать свойство переполнения для HTML и тела, но оно по-прежнему дает только серые полосы прокрутки.
Комментирование высоты: 100% для html / body, кажется, исправляет вертикальную прокрутку, но не горизонтальную - однако это нарушает мой градиент.
Что я делаю не так?
ОБНОВЛЕНИЕ: я пытался собрать пример с содержимым lorem-ipsum, чтобы показать проблему для jQuerybeast, и обнаружил, что прокрутка неожиданно заработала: я был сначала смущен, но потом понял, что не включил градиент фона фильтр: ProgID ......). Как только я добавил градиент, прокрутка перестала работать. Почему этот градиент нарушает свиток?