Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Background растянуть на всю страницу: Как растянуть фон на всю ширину окна?

Содержание

Как растянуть блок на весь экран CSS

HTML и CSS WordSmall

Заметил, что в интернете встречается довольно часто вопрос о том, как растянуть блок по высоте экрана. То есть чтобы он полностью заполнил все пространство вне зависимости от высоты самого монитора. Задачка, можно сказать, простенькая, но так как есть своя «хитрость», она окажется проблематичной, особенно, для начинающих.

И по такому случаю давайте реализуем блок на весь экран средствами CSS. Кстати, если хотите сделать по экранную прокрутку, то я делал обзор на JS-плагины экранной прокрутки (скроллинг). Вернемся к нашей задачи. Итак, вот один из примеров, как это можно сделать.

Берем DIV или можно section, и присваиваем ему высоту, использовав единицу измерения vh – это относительно 1% высоты окна просмотра. Пример:

<!DOCTYPE html>
<html>
<head>
    <title>Блок на всю высоту страницы</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
        <style>
        *{
        padding:0;
        margin:0;
        }
        
        section {
        height: 100vh;
        width: 100%;
        background:#E11328;
        }
        </style>
    <section>
    </section>        
        </body>
</html>

Посмотреть

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

<!DOCTYPE html>
<html>
<head>
    <title>Блок на всю высоту страницы</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
        <style>
        *{
        padding:0;
        margin:0;
        }
        
        .divleft {
          height: 100vh;
          width: 50%;
          background: #E1DD5B;
          float: left;
        }
        .divright {
          height: 100vh;
          width: 50%;
          background: #E13345;
          float: right;
        }
        </style>
        <div></div>
        <div></div>        
        </body>
</html>

Посмотреть

Есть также и другие варианты реализации. Это может быть flex, JavaScript и другое. Но этот рабочий и кроссбраузерный. Ну, если, конечно, браузер не очень старый. В Internet Explorer 8 этот способ не работает, а начиная с 9 все отлично.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

Подписаться на новые статьи



Изменить размер PDF — Изменяйте размер страниц PDF-файла онлайн

Изменяйте размеры PDF-файлов онлайн! Вам не надо ничего скачивать, просто воспользуйтесь бесплатным онлайн-сервисом.

Перетащите файлы сюда

Выберите значение A0A1A2A3A4 (Стандарт)A4 (Маленький)A5A6A7A8A9A10B0B1B2B3B4B5B6B0B1B2B3B4B5B6C0C1C2C3C4C5C6ARCH AARCH BARCH CARCH DARCH EЛист TabloidФормат LedgerФормат LegalФормат LetterФормат Letter (Маленький ) FLSAFLSEЛист Half LetterHagaki

Задайте размер страницы

Единица mminches

Ширина:

mm

Высота:

mm

Информация: Включите поддержку JavaScript, чтобы обеспечить нормальную работу сайта.

Публикация рекламы

300,000+ users

18,000+ users

Оставайтесь на связи:

Как изменить размер PDF онлайн?

  1. Загрузите PDF-файл.
  2. Выберите размер страницы из выпадающего списка стандартных размеров.
  3. Также можно настроить размер страницы (по желанию).
  4. Нажмите «Начать».

Измените размер PDF-файла онлайн


бесплатно в любом месте