Jump to content
  • 0

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


Freakmeister
 Share

Question

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

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

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

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

Edited by Freakmeister
Link to comment
Share on other sites

  • Answers 51
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

Ты чего мне 2 раза одно и тоже повторяешь?

Я понял тебя с первого раза. И сказал что вариант стоящий.

Насчет табов - никогда не встречал таких удивительных табов, обычно высота 3го таба не влияет на высоту 1го, ну и на родителя тоже. Какой таб активен, такая и высота у табхолдера. Но это кто как делает.

вот что нужно ТС (как я это понял) + внутри колонки одинаковой высоты.

у ТС это не табы, это линки на странички.

То что ты привел в примере - легко реализуется через фиксед, с меньшей замороченностью. Правда за исключением того что у тебя он всетаки прячеться при маленьком окне.

Link to comment
Share on other sites

  • 0
  Quote
возможность скрывания футера и топа

Разумная мысль. Но требует лишних неочевидных действий от пользователя, по сравнению с привычным скроллом. Имхо, тоже сильно зависит от задачи и реализации :)

Link to comment
Share on other sites

  • 0
  On 11/24/2011 at 11:52 AM, mishka said:

Ты чего мне 2 раза одно и тоже повторяешь?

Я понял тебя с первого раза. И сказал что вариант стоящий.

Это я подробно описал свою точку зрения в одном посте.

  On 11/24/2011 at 11:52 AM, mishka said:

Насчет табов - никогда не встречал таких удивительных табов, обычно высота 3го таба не влияет на высоту 1го, ну и на родителя тоже. Какой таб активен, такая и высота у табхолдера. Но это кто как делает.

Интересно как ты сделал бы табы, чтобы высота контента не влияла на родителя, можешь сделать пример? только давай сразу с учётом пожелания автора, контент слайдится от одного к другому по горизонтали как в примере.

А про то, что высота 3го влияет на высоту 1го я не писал, не понимаю откуда ты это взял.

  On 11/24/2011 at 11:52 AM, mishka said:

у ТС это не табы, это линки на странички.

Вот так ты читаешь тему, он сразу сказал, что хочет сделать сладер для контента.

  On 11/23/2011 at 11:36 AM, Freakmeister said:

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

  On 11/24/2011 at 11:52 AM, mishka said:

То что ты привел в примере - легко реализуется через фиксед, с меньшей замороченностью. Правда за исключением того что у тебя он всетаки прячеться при маленьком окне.

Про фиксед я писал выше. К тому же ты сам сказал

  On 11/24/2011 at 10:03 AM, mishka said:

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

или ты что-то другое хотел зафиксировать а не футер?

И можно пример с фикседом и меньшей замороченностью?

Link to comment
Share on other sites

  • 0

Ну про фиксед разобрались - можно, но тут не подходит, так как он всегда будет видимый. А значит и твой пример не подошел, так как у тебя тоже футер всегда видимый + дополнительный скролл.

Значит из этих двух вариантов фиксед все же проще. Тут я за фиксед.

  Quote
Вот так ты читаешь тему, он сразу сказал, что хочет сделать сладер для контента.

Да, невнимательно я прочел.

  Quote
Интересно как ты сделал бы табы, чтобы высота контента не влияла на родителя, можешь сделать пример? только давай сразу с учётом пожелания автора, контент слайдится от одного к другому по горизонтали как в примере.

А про то, что высота 3го влияет на высоту 1го я не писал, не понимаю откуда ты это взял.

Делать высоту табхолдеру по высоте активного таба.

Link to comment
Share on other sites

  • 0
  On 11/20/2011 at 11:28 PM, Switch74 said:

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

К сожалению нет времени читать весь топик, но с этим заявлением я не согласен. Простое прижатие футера через абсолют, да и не только, например. Я всегда использую для этого min-height: 100% для обёртки сайта.

Link to comment
Share on other sites

  • 0
  On 11/24/2011 at 12:54 PM, mishka said:

Вобщем как ни крути а это старый баг оперы который никак не хотят фиксить.

Бороться с этим - верстать по-другому или на оперу забить.

Ааа, ну если говорить про это, то да. Варианта два, но я всегда выбираю "Забить" :)

Link to comment
Share on other sites

  • 0
  On 11/24/2011 at 1:08 PM, Switch74 said:
  On 11/24/2011 at 12:38 PM, mishka said:

Делать высоту табхолдеру по высоте активного таба.

т.е. ты это предлагаешь делать через JS?

Ну для табов всеравно джс юзается.

Link to comment
Share on other sites

  • 0
  On 11/24/2011 at 1:02 PM, mishka said:

Во, нашел http://www.cssstickyfooter.com/

тут в опере работает, посмотрите css, там коммент есть по поводу оперы.

http://jsfiddle.net/4xDxK/4/

Спасибо за интересное решение, но есть вопрос. А для чего margin-top:-32767px;?

Link to comment
Share on other sites

  • 0
  On 11/24/2011 at 1:20 PM, Switch74 said:

с этим согласен.

http://jsfiddle.net/4xDxK/4/ - этот пример для меня?

он отвечает тем требованиям которые мы обсуждали выше, но он явно не доделан:)

не, не для тебя. Это я по тому примеру сделал и проверил в опере - работает.

Заморачиваться с примерами для тебя не хочу, лениво, ты уж извини :). Но так как это багло оперы с футером внизу уже имеет фикс, то я бы пытался сделать это именно таким способом как у ТС в примере.

думаю что ТС может свой вариант допилить для оперы, так как вот решение найдено.

Link to comment
Share on other sites

  • 0
  On 11/24/2011 at 2:01 PM, Nanto said:

Вот:http://jsfiddle.net/4xDxK/6/Много обёрток, но полностью соответствует требованиям автора!Заодно к вопросу - "зачем нужен костыль в виде min-height:100%" - вот за этим самым! :)

ну здесь то он грамотно используется

Link to comment
Share on other sites

  • 0

Омг, какой у вас тут живой форум. Надо заходить почаще. :D

Switch74, твой вариант не совсем то что нужно. Я хотел резиновую вёрстку по вертикали, чтобы контейнер обтекал контент. Как например тут:

http://silverflame.at.tut.by/sticky1.html

Или тут:

http://psywalker.ru/Forum/Footer_bottom/main.html

Два вида резиновой вёрстки и оба не кроссбраузерны - один не работает с Оперой, второй с IE7.

  On 11/24/2011 at 1:35 PM, mishka said:

http://www.cssstickyfooter.com/ - все кросс.

Вот это то что нужно! Я правда сейчас не в состоянии разбираться с этим, но похоже, что вот он фикс моей мечты:

body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

Добавил в пример Nanto - в Опере всё щщщщикарно!

Edited by Freakmeister
Link to comment
Share on other sites

  • 0
  On 11/24/2011 at 3:57 PM, Justnewone said:

К слову, опера - единственный браузер, который понимает min-height внутри отсчитанного min-height (то есть, если далее родитель с height).

Хм...а можно примерчик? :rolleyes:

Link to comment
Share on other sites

  • 0
  On 11/24/2011 at 6:08 PM, SelenIT said:

Ух ты, и действительно ведь. Загадочная она всё-таки, норвежская душа! :)

  On 11/24/2011 at 6:59 PM, Justnewone said:

вот, примерчик :)

Спасибо вам, ребят) :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy