Опера и высота окна

[Freakmeister]

Сверстал такую вот штуку: http://maestro-magnifico.ru/test/

Почему сверстал именно так, даже на спрашивайте... По задумке блок #middle должен будет ездить влево-вправо за границу блока #content, у которого overflow: hidden. Не суть!

Во всех браузерах эта вёрстка отображается замечательно, кроме оперы, где при ресайзе окна, высота контента не меняется. Отчего так - не понятно, надеюсь на совет матёрых верстальщиков.

З.Ы. Я в курсе проблемы наезжания футера на контент, и знаю как её решить, просто до этого пока ещё дело не дошло.

Edited November 21, 2011 by Freakmeister

[Switch74]

мне вот интересно, что вы хотели добиться подобным?..

#content {
min-height: 100%;
height: auto!important;}

min-height: 100%; - само по себе абсурд

height: auto; - это по умолчанию

думаю вам поможет установить height: 100%; для #content

[Freakmeister]

#content это блок с overflow:hidden, height: auto даёт обтекание контента, а min-height высоту блока. Если поставить height: 100%, то #content будет "кушать" контент при уменьшении окна, без отображения вертикальной прокрутки в браузере.

[ceil100]

мне вот интересно что дает вот эта штука?

margin-bottom: -30000px !important;
    padding-top: 30000px !important;

[Freakmeister]

Это эмуляция высоты колонок в 100% окна.

Короче я пол-дня гуглил и пришёл к выводу, что это нельзя никак починить без JS. Опера имеет целый набор глюков с атрибутом min-height в процентах и вертикальным ресазом (тогда как с горизонтальным ресайзом всё нормально):

http://archivist.incutio.com/viewlist/css-discuss/109460

К тому же, если в блок с min-height 100% прописать overflow: hidden, как сделано у меня, то этот блок в опере вообще не будет ресайзиться. Так что, остаётся только выгуглить как определить оперу средствами html, чтобы подключить в неё скрипт с ресайзом блока по setinterval.

[Switch74]

вы понимаете что делать min-height в процентах - это тупость, не имеет смысла и бесполезно.

[Freakmeister]

А как ты ещё предлагаешь задать высоту блоку в 100% с overflow: hidden, умник?

[Nanto]

вы понимаете что делать min-height в процентах - это тупость, не имеет смысла и бесполезно.

Этой "тупостью" на большинстве страниц в вебе футер "к низу прижимают"... Учите мат.часть!

[Nanto]

Только что сам с этим столкнулся - хотел уже тему заводить, но нашёл глюк сам!.. У Вас та же фигня!

Опера начинает тупить при динамическом изменении высоты (без перезагрузки страницы) - у меня, например тупо тормозила - могла с задержкой ресайзнуть блок, а могла и оставить как был. У Вас оставляет без изменений.

И вот гнусные разрабы вместо нормальной работы со структурными свойствами гонятся за "плюшками" CSS3!

Короче, поковырявшись, нашёл затык, которой заставляет тупить Оперу - ей нельзя скармливать "min-height:100%" в некоторых случаях. Долго раскапывать в каких, но в Вашем в случае - замените в #content "height: auto !important;" на "height:100%", а "min-height" - удалите!

[SelenIT]

вы понимаете что делать min-height в процентах - это тупость, не имеет смысла и бесполезно.

Судя по всему, никто, кроме вас, не понимает. Я, например, не понимаю. Уж объясните как-нибудь популярно, для блондинок...

P.S. Версию "прижатый футер не имеет смысла и противоречит чистой и светлой идее электронного документа" не предлагать — она тупо не соответствует действительности

А проблема с перерисовкой вертикальных размеров у Оперы бывает, причем и c min-height, и с height. Вот в этой теме когда-то выяснили, что по крайней мере в современных версиях помогает display:table для контейнера.

Еще Оперы до 12-й версии ненавидят размеры больше 32767px по модулю (неважно где — в padding, text-indent и т.п.), т.к. когда-то разработчики решили, что 32kpx "хватит каждому"...

А по сабжу — первым делом выжечь все !important каленым железом. Видел хороший коммент на Хабре а-ля "!important — как последний патрон: оставьте для себя..."

[Nanto]

Да уж... Посмотрев Ваш код немного в шоке... Зачем такого намутили?

Чего хотели? "Футер к низу, колонки на всю высоту и overflow:auto"?

[Freakmeister]

Только что сам с этим столкнулся - хотел уже тему заводить, но нашёл глюк сам!.. У Вас та же фигня!

Опера начинает тупить при динамическом изменении высоты (без перезагрузки страницы) - у меня, например тупо тормозила - могла с задержкой ресайзнуть блок, а могла и оставить как был. У Вас оставляет без изменений.

И вот гнусные разрабы вместо нормальной работы со структурными свойствами гонятся за "плюшками" CSS3!

Короче, поковырявшись, нашёл затык, которой заставляет тупить Оперу - ей нельзя скармливать "min-height:100%" в некоторых случаях. Долго раскапывать в каких,

Опера почему-то неправильно обрабатывает min-height и событие onresize срабатывает только при горизонтальном ресайте, но не при вертикальном. Попробуйте задать это свойство и потянуть окно не за угол браузера, а за низ, и увидите что высота контента не меняется. А если потянуть его хотя бы на пиксель в сторону, контент примет нужную высоту. Та же лабуда была замечена и в IE8 при добавлении футера.

но в Вашем в случае - замените в #content "height: auto !important;" на "height:100%", а "min-height" - удалите!

Я не могу это сделать, потому как у блока #content прописано overflow: hidden, и если высоту задать в 100%, то он будет "кушать" контент при ресайзе.

Да уж... Посмотрев Ваш код немного в шоке... Зачем такого намутили?

Чего хотели? "Футер к низу, колонки на всю высоту и overflow:auto"?

Я хотел колонки на всю высоту, футер к полу и ещё по задумке кнопки в навигации должны будут переключать контент "слайдером" влево-вправо, примерно как это реализовано здесь http://pxtoem.com/ Для этого мне и нужен блок #content с overflow: hidden.

Edited November 23, 2011 by Freakmeister

[Nanto]

Я бы даже париться не стал! Таблицей бы сходу жахнул...

Но если Вам принципиально именно блоками. То задачу надо разделять:

а) делаем кроссбраузерный каркас с колонками на всю высоту и прибитым футером;

б) вставляем слайдер - он все равно на JS, а посему влепить его можно будет как угодно - и overflow тут не нужен; что мешает например переключать display:none/display:block?

Это я к тому, что в Вашем коде невероятно трудно разобраться - перемешанные height и min-height, колонки с их margin-padding-overflow, псевдоэлементы и т.д. и всё в кучу!..

Начните с каркаса и попроще-попроще...

[Switch74]

такой вариант не подойдёт?

[SelenIT]

Switch74, а чем всё-таки плох min-height в процентах?

[Switch74]

он не плох - он бессмысленен в данном случае.

это костыль зачем нам костыли, если можно научить ходить.

[Nanto]

а JS - это не костыль? Это протез натуральный!

[Switch74]

хм.. Nanto, а при чём тут JS?

[mishka]

Человеку нужно прибивать футер к низу окна браузера, если мало контента. Это частая задача и она не лишена смысла.

Ты предлагаешь тупо поставить min-height: 200px. Ты же сам должен понимать что это далеко не то что нужно.

[Switch74]

хм.. а все смотрели как отрабатывает данная реализация?

футер всегда внизу, контент растягивается на всю высоту браузера.

min-height нужен лишь для того, чтобы контент совсем не исчез при сужении окна браузера меньше чем на 200px, если вам это не нужно уберите его.

Если футер должен быть прижат к полу браузера, сделайте ему position:fixed;, но данного условия я не заметил

В моём примере сделано на подобие выложенных примеров 1 и 2

если сильно не нравятся position:absolute; легко можно перейти к реализации как у Freakmeister

Edited November 24, 2011 by Switch74

[mishka]

Ну у тебя немного не то что хочет автор. Хотя тоже стоит внимания.

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

[Switch74]

если ты понимаешь что он хочет, попробуй объяснить мне что он хочет.

Человеку нужно прибивать футер к низу окна браузера, если мало контента.

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

Ты предлагаешь тупо поставить min-height: 200px. Ты же сам должен понимать что это далеко не то что нужно.

Это я сделал, чтобы контент при уменьшении размеров окна меньше 200px было видно и он не исчезал совсем как в примере (попробуй уменьшать высоту браузера, в конце концов top и footer схлопнут контент и от него ничего не останется, если тебя это устраивает убери из css min-height)

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

учти, что у автора на одной странице может быть несколько разноразмерных контентов, все они находятся в одном контейнере и все они влияют на высоту. Предположим в том что показывается по умолчанию мало контента(1 строчка), а тот что скрыт очень много(1000строк): тогда получится что у нас на сайте будет показываться 1строка и придётся очень много крутить сайт вниз, чтобы увидеть футер. Данную реализацию не стоит делать резиновой больше размеров окна браузера. В примере всё грамотно сделано.

Если ты не согласен выскажи свою точку зрения, если что-то не понял задавай вопросы.

[SelenIT]

Switch74, спасибо, теперь резоны понятны. Хотя плодить скроллбары — тоже зло, в экстремальном случае "один таб — одна строчка, другой — тысяча", согласен, это зло будет меньшим, но вот когда во всех табах контента пикселей на 500-700 высоты, а просмотр идет на нетбуке с 600 пикселями высоты экрана на всё... имхо, лучше уж прокрутить весь сайт на пару оборотов колесика ради просмотра футера, чем сплющивать каждый таб до окошка на полдесятка строк с бешеной прокруткой внутри. Короче, надо смотреть по ситуации. Однозначно обзывать резиновый min-height "бредом", по-моему, всё-таки нет оснований.

[Switch74]

если делать резиновый контент в данной ситуации, то выгоднее было бы сделать футер фиксированным

[SelenIT]

Имхо, спорный тезис всё же. Обычно в футере второстепенная информация, а при фиксации она всегда будет отнимать место у действительно полезной. На очень тесных по высоте экранах (те же нетбуки) это может быть критично. Отпихивание футера контентом вниз в таком случае удобнее.

[Switch74]

а если для этих целей сделать возможность скрывания футера и топа для увеличения полезной рабочей области (по сути нужно только меню навигации и контент)