overflow: auto; как сделать блок с полосой прокрутки

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

Для задания блоку полосы прокрутки, применяется свойство 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>
<p>Если Жириновского или Зюганова вдруг выберут президентом,
им что, вешаться? Или объявлять результаты выборов
фальсифицированными?</p>
<p>Спасибо американцам за то что кормят нашу оппозицию.
А то бы она нас объедала.</p>
<p>Почему если ребенок упал и ушибся сильно
ему говорят: «не бегай быстро, или не лазай туда».
Почему не спросят: “Как так вышло, что ты упал и ушибся?
Другие ведь тоже и бегают и лазают, а не падают.
Может быть ты наврал кому нибудь, может матом обругался,
может обижал кого нибудь, а может пробовал курить или своровать?
Почему детям просто говорят «нельзя», и не объясняют почему нельзя?
Почему с детства не объясняют что делать гадости - себе дороже?
Наверное взрослые сами этого не знают!</p>
<p>Где искать Бога, и откуда ждать дьявола?
Да только в себе самом, и из себя самого!
Туточки они оба. А то - небеса-а-а, подземелья.</p>
<p>Кто дал Баскову погоняло «золотой голос России»,
а Киркорову «король эстрады»?
У нас они всегда были Филя и Петушок - золотой гребешок.</p>
<p>Почему святые угодники и великомученики подобны звездам на небе,
а попса и телеведущие - уже звезды?</p>
<p>Журналисты - акулы , а питаются только тем, что другие настряпают.
Наверное все таки - шакалы, ну кто покруче - гиены.</p>

</body>
</html>

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

Хороший артист — это хороший человек, или наоборот-
конченный мерзавец, или уж как обычно — всяко бывает?

Если Жириновского или Зюганова вдруг выберут президентом,
им что, вешаться? Или объявлять результаты выборов
фальсифицированными?

Спасибо американцам за то что кормят нашу оппозицию.
А то бы она нас объедала.

Почему если ребенок упал и ушибся сильно
ему говорят: «не бегай быстро, или не лазай туда».
Почему не спросят: “Как же так вышло, что ты упал и ушибся?
Другие ведь тоже и бегают и лазают, а не падают.
Может быть ты наврал кому нибудь, может матом обругался,
может обижал кого нибудь, а может пробовал курить или своровать?
Почему детям просто говорят «нельзя», и не объясняют почему нельзя?
Почему с детства не объясняют что делать гадости — себе дороже?
Наверное взрослые сами этого не знают!

Где искать Бога, и откуда ждать дьявола?
Да только в себе самом, и из себя самого!
Туточки они оба. А то — небеса-а-а, подземелья.

Кто дал Баскову погоняло «золотой голос России»,
а Киркорову «король эстрады»?
У нас они всегда были Филя и Петушок — золотой гребешок.

Почему святые угодники и великомученики подобны звездам на небе,
а попса и телеведущие — звезды?

Журналисты — акулы , а питаются только тем, что другие настряпают.
Наверное все таки — шакалы, ну кто покруче — гиены.

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

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


Перемена

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

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

 

Рекомендую: Готовые HTML шаблоны на русском

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

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

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

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

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

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

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

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

  4. anurik говорит:

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

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

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