Как сделать блок с полосой прокрутки

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

Для задания блоку полосы прокрутки, применяется свойство overflow, со значением auto

Смотрим пример.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
  p{
    border: 2px solid #ffff00;
    padding: 10px;
    width: 400px;
    height:150px;
    overflow: auto;
}
</style>
</head>
<body>
  <p>Хороший артист - это хороший человек, или наоборот-
конченный мерзавец, или уж как обычно - всяко бывает?
Если Жирика или Зюганова вдруг выберут президентом,
им что, вешаться? Или объявлять результаты выборов
фальсифицированными?
Спасибо американцам за то что кормят нашу оппозицию.
А то бы она нас объедала.
Проблемы воспитания. Почему если ребенок упал и ушибся сильно
ему говорят: «не бегай быстро, или не лазай туда».
Почему не спросят: “Почему же ты упал и ушибся?
Другие ведь тоже и бегают и лазают, а не падают.
Может быть ты наврал кому нибудь, может матом обругался,
может обижал кого нибудь, а может пробовал курить или своровать?
Почему детям просто говорят «нельзя», и не объясняют почему нельзя?
Почему с детства не объясняют что делать гадости - себе дороже?
Наверное взрослые сами этого не знают!
Где искать Бога, и откуда ждать дьявола?
Да только в себе самом, и из себя самого!
Туточки они оба. А то - небеса-а-а, подземелья.
Кто дал Баскову погоняло «золотой голос России»,
а Киркорову «король эстрады»?
У нас они всегда были Филя и Петушок - золотой гребешок.
Почему святые угодники и великомученики подобны звездам на небе,
а попса и телеведущие - звезды?
Журналисты - акулы , а питаются только тем, что другие настряпают.
Наверное все таки - шакалы, ну кто покруче - гиены.
  </p>

</body>
</html>

И посмотрим, как отобразит этот код браузер

Блок с полосой прокрутки сделанный свойствами html и css

Это скриншот, так что не пытайтесь сдвинуть бегунок. У Вас в браузере он будет отлично прокручиваться.

Дальше начнётся самое интересное – это фоновые изображения и позиционирование.

Неужели не осталось вопросов? Спросить


Перемена

— Дорогой, мне врач прописал курс лечения: секс не меньше 20 раз в месяц.
— Хорошо, дорогая, только не забудь: два раза мои!

Прозрачные изображения и прозрачный текст CSS < < < В раздел > > > Блок с закруглёнными углами и тенью. Эллипс.

 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

4 комментария на «Как сделать блок с полосой прокрутки»

  1. stariс говорит:

    Освоить html, css, сделать меню и вставит его в блок.

  2. Никита говорит:

    Как этот блок сделать под меню?

  3. stariс говорит:

    Над страницей ни как не сделаешь.

  4. anurik говорит:

    как сделать так чтобы было над страницей. не растягивало ее при нажатии на кнопку ОТКРЫТЬ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *