Kostia.Ivashchenko
-
Posts
10 -
Joined
-
Last visited
Kostia.Ivashchenko's Achievements
Explorer (1/14)
0
Reputation
-
Ага, рассматривался, рассматривался, да так и не был решен вразумительно. Налепил некий код, который меня не удовлетворяет до конца, но все-таки как-то работает: http://jsfiddle.net/Kostia_Ivashchenko/Bwdhn/
-
Молчат гуру, не дают ответа...
-
А список болезней где хранится?
-
Потом выложил онлайн: http://jsfiddle.net/Kostia_Ivashchenko/BngRm/ Потом решил усложнить задачу: добиться того, чтобы на макете были полноширинные header и footer фиксированной высоты, прилегающие к верхнему и нижнему краям окна браузера, соответственно, а между ними - центрированная область фиксированной ширины, занимающая все пространство по вертикали. Долго мучился, самое лучшее из того, что получилось, выложил здесь: http://jsfiddle.net/Kostia_Ivashchenko/HfPNZ/ Однако решение получилось мало того, что некошерным, поскольку использует форматирование таблицами, но еще и работает так, как я хочу, только в Файрфокс, в Опера и ИЕ работает по другому, а в Хром - еще по другому. Может быть кто-то из корифеев подскажет, куда в данном случае ползти? Заранее признателен.
-
Вылечил. Заменой .div100percents { position: fixed; } на .div100percents { position: absolute; } Всем участникам обсуждения - большое спасибо!
-
После некоторого размышления у меня возникло ощущение, что приведенное в этом элегантном решении форматирование вида html, body {height: 100%;}является чересчур, как бы это сказать, обязывающим - мало ли какие изменения сайта будут потом нужны. Поэтому переработал код к такому виду: HTML: <div class="div100percents"> <div class="mainDiv"> </div> </div> CSS: body { margin: 0; } .div100percents { position: fixed; width: 100%; top: 0; bottom: 0; } .mainDiv { position: static; width: 800px; min-height: 100%; margin: 0 auto; } Поставленную исходную задачу этот код выполняет. Но я с удивлением обнаружил, что при уменьшении окна браузера по ширине размер внутреннего блока остается фиксированым, но горизонтальная полоса прокрутки в браузере не появляется и часть содержимого этого блока уходит за правую границу. Вопрос - почему?
-
Спасибо за предыдущий ответ, вроде все понятно (пока ). Спасибо. Но для чего здесь странное (на мой взгляд новичка, естественно) сочетание: left: 50%; margin-left: -30%;???
-
Спасибо, по указаной ссылке Ваше решение действительно показывает то, чего я хотел добиться. Но. 1. Почему-то локально мне удается воспроизвести это решение только после добавления в файл стилей: body {margin: 0;} В противном случае сверху и снизу появляются поля, а в окне браузера - полоса прокрутки. Почему? 2. Мне совершенно непонятно, почему Ваше решение работает, только если свойство height: 100%; установить одновременно для тэгов <html> и <body>?
-
Спасибо, Вы ответили на оба мои вопроса: Да поведение слоя, описанное в моем посте, соответствует спецификации CSS. Для того, чтобы добиться желаемого поведения слоя, придумано масса трюков, как с использованием JS, так и без него. А что касается того, что то это свидетельствует, как минимум, о двух вещах: Не существует решения, устраивающего всех. Каждое из обсуждений такого решения не так уж легко найти. В общем, npofopr'у еще раз спасибо за ответ, но не мог бы кто-нибудь бросить хоть одну ссылку?
-
Здравствуйте, новичку нужна консультация гуру. Для некоторых сайтов (например, чатов) крайне желательно, чтобы их контент занимал по вертикали всю высоту окна. Захотелось попробовать сделать необходимое макетирование с помощью <DIV>, в результате накропал следующий код: HTML <body> <div id="mainDiv"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <!-- id="mainDiv" --> </body> CSS body { background: #fbf; margin: 0; padding: 0; } #mainDiv { position: fixed; width: 60%; background: #8ff; border-left: 1px black solid; border-right: 1px black solid; top: 0; bottom: 0; margin-left: auto; margin-right: auto; } Результат: Указанное значение свойства bottom: 0; интерпретируется так, как я и ожидал - блок растягивается по вертикали, чтобы полностью заполнить окно браузера. Однако при написании кода я хотел еще и отцентрировать блок в окне, что не получилось. Тогда решил в коде выше заменить строку position: fixed; на строку position: static;. Результат: Гм. Теперь блок центрирован по горизонтали, но не растягивается по вертикали, хотя изменено было значение всего одного свойства. А теперь, собственно, вопросы к гуру: Такое отображение слоя действительно предусмотрено спецификацией CSS, или это у меня руки кривые? Если по спецификации слой так и должен отображаться, то получается, что только средствами CSS невозможно слой одновременно отцентрировать по горизонтали и растянуть по вертикали? Или все-таки возможно как-то извратиться и обойтись без использования JavaScript? Заранее признателен за ответ.