Что произойдет, если объединить две проблемы, связанные с версткой? Мы все в глубине души надеемся, что проблемы, возникающие при решении этих задач, решатся.
Однако практика показывает, что они размножаются.
Если вас интересует, как с помощью только div и валидного CSS сделать страницу, которая «отбрасывает тень» (слева и справа) и при этом занимает по высоте не меньше экрана, добро пожаловать под кат! Для начала давайте вспомним, как обычно делаются тени.
Есть такой старый проверенный метод «луковой чистки».
Мы же не хотим, чтобы наши тени можно было выбирать с помощью мыши, не так ли? Поэтому их необходимо использовать в качестве фона, а поскольку нельзя отдельно задать фоновые изображения для левого и правого края, приходится вкладывать несколько divов друг в друга.
Теперь о высоте.
Чтобы сделать слой высотой экрана, нужно иметь его и все элементы, в которые он вложен (начиная с тела или даже html) высота:100% .
Но нас это не совсем устраивает, потому что.
нам нужно, чтобы 100% было минимальной высотой.
Для этого есть хак минимальная высота: 100%; высота: авто !важно; высота: 100%; «Но когда мы совмещаем луковую шелуху с этим хаком, то получается фигня, потому что у нас одна тень растягивается на высоту окна браузера, а другая — на высоту контента.
Вместе с другом предложение гонки Мы просидели над этим всю ночь, но, как говорится, утро вечера мудренее.
Хотя, когда уже рассвело (но еще до того, как мы пошли спать) мы подумали, что нашли решение.
Мы сделали эти фоновые картинки статическим фоном.
И всё было хорошо, пока не появилась горизонтальная прокрутка! Ну а теперь, собственно, решение, которое мы нашли.
Чтобы вам было понятнее, как это выглядит в действии, я привел два примера: с растяжением содержимого по высоте И с растяжкой по высоте экрана А теперь немного о том, как это работает. Сначала мы создаём контейнеры высотой 100% от окна и размещаем там один узкий столбец со стилем «float:right; Margin-right:-5px».
После него размещаем контейнер, содержащий весь контент. Таким образом мы получаем тень, которая выглядит как надо.
Теперь перед ней ставим небольшой трюк, чтобы нижний колонтитул располагался там, где он нужен.
(иначе все уйдет в IE).
Этот метод был протестирован для работы в Firefox 2.3, Opera 9.27, 9.5, IE 6.7, Safari для Win.
Теги: #CSS #shadow #stretch #CSS
Что произойдет, если объединить две проблемы, связанные с версткой? Мы все в глубине души надеемся, что проблемы, возникающие при решении этих задач, решатся.
Однако практика показывает, что они размножаются.
Если вас интересует, как с помощью только div и валидного CSS сделать страницу, которая «отбрасывает тень» (слева и справа) и при этом занимает по высоте не меньше экрана, добро пожаловать под кат! Для начала давайте вспомним, как обычно делаются тени.
Есть такой старый проверенный метод «луковой чистки».
Мы же не хотим, чтобы наши тени можно было выбирать с помощью мыши, не так ли? Поэтому их необходимо использовать в качестве фона, а поскольку нельзя отдельно задать фоновые изображения для левого и правого края, приходится вкладывать несколько divов друг в друга.
Теперь о высоте.
Чтобы сделать слой высотой экрана, нужно иметь его и все элементы, в которые он вложен (начиная с тела или даже html) высота:100% .
Но нас это не совсем устраивает, потому что.
нам нужно, чтобы 100% было минимальной высотой.
Для этого есть хак минимальная высота: 100%; высота: авто !важно; высота: 100%; «Но когда мы совмещаем луковую шелуху с этим хаком, то получается фигня, потому что у нас одна тень растягивается на высоту окна браузера, а другая — на высоту контента.
Вместе с другом предложение гонки Мы сидели над этим всю ночь, но, как говорится, утро вечера мудренее.
Хотя, когда уже рассвело (но еще до того, как мы пошли спать) мы подумали, что нашли решение.
Мы сделали эти фоновые картинки статическим фоном.
И всё было хорошо, пока не появилась горизонтальная прокрутка! Ну а теперь, собственно, решение, которое мы нашли.
Чтобы вам было понятнее, как это выглядит в действии, я привел два примера: с растяжением содержимого по высоте И с растяжкой по высоте экрана А теперь немного о том, как это работает. Сначала мы создаём контейнеры высотой 100% от окна и размещаем там один узкий столбец со стилем «float:right; Margin-right:-5px».
После него размещаем контейнер, содержащий весь контент. Таким образом мы получаем тень, которая выглядит как надо.
Теперь перед ней ставим небольшой трюк, чтобы нижний колонтитул располагался там, где он нужен.
(иначе все уйдет в IE).
Этот метод был протестирован для работы в Firefox 2.3, Opera 9.27, 9.5, IE 6.7, Safari для Win. Теги: #CSS #shadow #stretch #CSS
-
Понимание О Дизайне Id-Бейджей
19 Oct, 24 -
Малая Космическая Симфония
19 Oct, 24 -
Сборка Компьютера С Водяным Охлаждением
19 Oct, 24 -
Переход С Google Maps На Openstreetmap
19 Oct, 24 -
Olpc: Концепт Xo-2
19 Oct, 24 -
Визуализация Алгоритмов Сборки Мусора
19 Oct, 24
