Фиксированны и динамический scroll для блока по вертикали(height)

И опять же мой пост из рубрики “вкусности на заказ“! Сегодня я расскажу об вертикальном статическом и динамическом скролле для елемента div. Можно, конечно, использовать эти два способа и для таблиц, но результат будет не тот, как и верстка таблицами =) Итак, намечаем цели.

Первое задание состояло в том, чтобы сделать фиксированый блок и если в нем много контента – справа была полоса прокрутки. Это просто сделать с помощью свойства overflow: scroll. Но погодите, не все так просто. При таком условии появится п горизрнтальная прокрутка…Что же деалать?

Решение:

Вот, собственно и вся магия. Ставим нужную нам фиксированную высоту, к примеру 400px и наслаждаемся нашим творением. Здесь вроде ничего сложного. Теперь перейдем ко второму заданию.

Второе задание состояло в том, что бы создать страницу с header, footer и content так, что бы полоса прокрутки ко всей странице не применялась никогда, даже если она есть и блок content бы не больше, чем окно браузера, сколько бы в нем нибыло информации и, если информации много, появлялся вертикальный scroll(так как в первом задании), но при всем этом, когда разрешение экрана большое, и контент влазит в окно без прокрутки, то scroll автоматически убирался, а блок контента тянулся и показывал весь контент без всяких скролов и hidden’ов на тексте. Мда, задачка не из легких, скажу я Вам. Здесь понадобятся не маленькие знания, но тот, кто ищет, тот всегда находит. И все же у меня все вышло. Вот ниже решение этой задачи:

Для начала как всегда создаем каркас нашей страницы(идем в файл html):

Далее идем в файл css:

Теперь вставте в блок content сколько угодно текста, и вы увидете, что страница не будет прокручиваться, а текст внутри блока будет. Появится вертикальная прокрутка. И еще один очень немаловажный момент. Вы заметели, в файле стиле в самом начале для body мы прописали свойство overflow:hidden. А теперь думае логически.  Обычный scroll для всей страницы, он ведь не является внутреним элементом для body, но является частью окна и частью документа, поэтому при таком условии даже если текста будет больше, чем высота окна браузера, вертикальный скролл не будет появляться для всей страницы 100%. Очень полезныое свойство.

Вы можете посмотреть на примере как получилось у меня.

Если Вам понравилась статья и Вы хотите следить за обновлениями в блоге, то подписывайтесь через RSS, становитесь моим фолоувером в twitter. Так же, возможно, Вы хотите разместить постовые или любые другие виды рекламы. В таком случае пишите мне на ICQ:451240340

Я очень люблю читать про заработок в интернете! Мое хобби и мой любимый вид деятельности это зарабатывание денег! =) А у Вас?