Скрыть переполнение, только если размер страницы слишком мал

Question

У меня есть страница с именем div с допустимыми значениями 1000px width и position: relative;, а на этом div страницы есть логотип с position: absolute; и top:-20px; right: -20px. Когда ширина страницы превышает 1000 пикселей, изображение должно отображаться, но когда ширина страницы равна или меньше 1000 пикселей, переполнение должно быть скрыто (overflow: hidden;).

Когда я устанавливаю атрибут переполнения в div страницы на overflow: hidden;, логотип обрезается, и когда я выбираю visible, я получаю горизонтальную полосу прокрутки, когда ширина страницы равна или меньше 1000 пикселей.

Моя идея решить эту проблему - использовать JavaScript и установить атрибут overflow в зависимости от ширины страницы. Я бы предпочел решение CSS, но не смог найти. : - /

У кого-нибудь есть предложения, как решить эту проблему с помощью CSS?

Спасибо!

Answer 1

Решение действительно простое ...

Просто создайте div-обертку вокруг страницы.Допустим, div страницы имеет ширину 1000px, а div-обертку имеет width: 100%.Тогда это самый простой способ установить overflow: hidden для div-оболочки, и когда размер страницы уменьшается, например, до 1020px, часть изображения обрезается, а когда размер уменьшается еще до 1000px, появляется горизонтальная полоса прокрутки из-за div страницыимеет значение по умолчанию overflow: visible).

И это все ... работает (почти) в каждом 5-летнем браузере.

Answer 2

Вы должны сделать это с помощью CSS (не Javascript для проблем с макетом браузера) - и использовать запрос @media.

Примерно так, где место, где должна отображаться горизонтальная прокрутка, составляет 1200 пикселей и ниже.

@ мультимедийный экран и (минимальная ширина: 1200 пикселей) { html {overflow-x: hidden;}

Вставьте это в конец таблицы стилей или в некоторые теги в заголовке для проверки.

Answer 3

Вы можете использовать CSS Media запросы (http://www.w3.org/TR/css3-mediaqueries/), чтобы изменить макет в зависимости от размера экрана. Т.е. :

@media screen and (max-width: 1000px) { 
#page { overflow: hidden; } 
}

#page { overflow: visible; }