Лучшие практики для создания плавающей оболочки для динамических размеров экрана

Question

У меня есть веб-страница, ширина содержимого которой составляет около 900 пикселей, но минимальная ширина (поскольку изображение заголовка больше 900 пикселей) составляет около 1200 пикселей. Это означает, что когда я просматриваю свою страницу с экрана размером менее 1200 пикселей, но больше 900 пикселей, веб-страница будет иметь вертикальную прокрутку.

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

Я попытался добавить overflow-x в контейнер body, надеясь, что тег body займет ширину моего экрана. Это работает во всех браузерах, кроме IE7, который мне нужен для работы в aswell.

Есть ли способ, который позволил бы этому работать?

Дайте мне знать, если мне непонятно в моих объяснениях.

Answer 1

Вы можете рассмотреть возможность использования выражения в IE. Это немного медленно, но поможет вам в старых браузерах. CSS будет выглядеть примерно так:

div.container { min-width: 900px; overflow-x: hidden; }
* html div.container { width: expression(Math.max((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth), 900)+'px'); }