English version, in short: if you have some block for all size of screen, that should cut-off all content (width/height 100% + overflow: hidden), opera cuts off its content, but left scrollbar for empty content.
To fix that problem, you can try replace
#some { overflow: hidden; width: 100%; height: 100%; }with
#some { overflow: hidden; position: absolute; left:0; right:0; top:0; bottom:0; }That helps opera to correctly cut-off all content without adding scrollbar. That doesn’t break Mozilla/Safari/Chrome, but breaks even IE8, so you should override CSS for IE8 with conditional comments.
Поговорим опять о багах в Опере. на этот раз — лишний скроллбар.
Вот у нас есть код:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<link rel="stylesheet" href="screen.css" type="text/css" />
</head>
<body>
<div id="nofooter">
<div id="main-page-sizer">
<div id="main-page-wrapper">
<div id="main-page">
<div id="main-bg"></div>
</div>
</div>
</div>
<div id="footer-pusher"></div></div>
<div id="footer">
<div id="logo-footer-mover"><div id="logo-footer"></div></div>
</div>
</body>
</html>
И парный к нему CSS:
html{ height: 100%;}
body { height: 100%; margin: 0; padding: 0; position: relative; background: #6c1700 50% 0; }
#nofooter{ min-height: 697px; min-width: 1000px; height: 100%; margin-bottom: -1px; position: relative; }
#footer-pusher { height: 1px; clear: both; line-height: 1px; font-size: 1px; }
#footer { height: 1px; line-height: 1px; min-width: 1000px;}
#main-page-sizer
{
min-height: 697px;
margin-bottom: -1px;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#main-page-wrapper
{
margin: 0 -140px;
overflow: hidden;
height: 100%;
}
#main-page
{
background-color: #4c1700;
width: 1280px;
height: 100%;
margin: 0 auto;
position: relative;
background: red;
}
#main-bg
{
background: green no-repeat;
position: absolute;
left: 356px;
top: 0;
width: 634px;
height: 970px;
}
#logo-footer-mover
{
width: 202px;
height: 1px;
margin: 0 auto;
position: relative;
}
#logo-footer
{
background: blue;
width: 202px;
height: 71px;
position: absolute;
top: -70px;
left: 0;
}
Итоговая страница тянется по Y от ~700px до 1000px без скроллбара, причем во всем этом пределе от main-bg видно столько, сколько влезло.
(На самом деле, блок main-page имеет размер 1280*970px, и в нем может быть размещено что угодно, причем это что угодно будет отцентровано по иксу в размерах от 1000px (при сжимании от 1280 до 1000 слева и справа части скрываются без появления полосы прокрутки), и прижато по игреку к верху, причем всё, находящееся внизу ниже 700px отрезается тоже без появления полосы прокрутки. При размере больше 970px размер main-page должен быть 100% (там сейчас и прописано 100%), чтобы другие расположенные в нем блоки с height=100% были максимум, всё остальное занимает его бекграунд.
Забудем про проблемы IE (они легко фиксятся через expression для 6 и 7), и поговорим о интересном баге с прокруткой в опере.
При сворачивании, как только размер #main-page-wrapper становится меньше размера #main-bg, то содержимое #main-bg корректно обрезается, но появляется полоса прокрутки, несмотря на overflow:hidden. Причем за пределами ничего нет, там показывается только бекграунд от body.
После долгих копаний, удалось найти workaround вокруг этой проблемы: вместо
#main-page-wrapper {
overflow: hidden;
height: 100%;
}Используется
#main-page-wrapper {
overflow: hidden;
position: absolute; left: 0; top: 0; bottom: 0; right: 0; /* Opera scrollbar workaround */
}То есть меняем блок, с параметрами width/height: 100%+overflow:hidden на position: absolute 0/0/0/0 + overflow:hidden.
Теоритически, это одно и то же. На практике созаёт проблемы с IE8, которые лечатся через условные комментарии и переопределение на position:static+height:100%.
В общем, это решает проблему… но не совсем. В результате всё хорошо показывается если загрузить страницу в каждом из разрешений.
Если же загрузить в маленькое окно и начать тянуть только за нижнюю границу — то отрисовка бекграундов-изображений не повторяется, рисуется только сплошной цвет. До тех пор, пока окно не будет изменено еще и по горизонтали, или не будет перезагружена страница.
Workaround’а для этой проблемы уже не удалось найти.
