Как уменьшить размер блока в css
В большинстве случаев размер блока формируется исходя из размера контента внутри него. Иногда такое поведение не нужно и мы хотим зафиксировать определённые значения. Для этого в CSS можно использовать свойства:
- width — ширина блока
- height — высота блока
В качестве значения принимаются числовые значения и единица измерения. Например,
.block width: 300px; height: 300px; > Теперь элемент с классом block будет иметь ширину и высоту по 300 пикселей
Как зафиксировать размер блока css
Позиционирование это определение положение элемента относительно заданных координат. Отсчет координат зависит от значения свойства position : при absolute отсчет ведется от окна браузера, при relative — относительно исходного положения элемента. Важную роль также играет сочетание значений свойства position у родительского и дочернего элемента. Так, если у родителя стоит position : relative , а у дочернего элемента position : absolute , то отсчет координат будет уже вестись относительно не окна браузера, а именно родителя. Проиллюстрируем это на примере 1.
Пример 1. Использование позиционирования
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 1. Для слоя с именем layer1 задано относительное позиционирование, а для слоя layer2 — абсолютное. Поэтому добавление свойств top , right , bottom и left задает положение слоя layer2 относительно слоя layer1 .
Рис. 1. Положение слоев относительно друг друга
Применительно к организации двухколонного макета фиксированной ширины, алгоритм следующий. Создаем контейнер (так его и назовем container ), в котором будут храниться наши колонки, и добавляем к нему position : relative . Для одной или двух колонок обязательно устанавливаем ширину ( width ) и абсолютное позиционирование. Теперь положением колонок можно точно управлять с помощью top , right , left , bottom (пример 2).
Пример 2. Макет из двух колонок
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Макет с двумя колонками
При создании подобного макета примите во внимание, что размеры абсолютно позиционированных элементов подгоняются под их содержание, поэтому ширину надо указывать явно. Также слои могут накладываться поверх других элементов макета, что можно наблюдать при уменьшении текста в левой колонке. Поэтому использование позиционирования подходит далеко не во всех случаях.
CSS решения. Фиксированный блок плюс адаптивный блок.
В данной статье поговорим об одной из базовых задач в вёрстке — создании фиксированного и адаптивного блоков; приведём решение данной задачи, а также разберём основные преимущества и недостатки описываемых решений.
В данной статье будем рассматривать два случая:
- old style — решение, которое должно работать в браузере IE9 и выше
- new style — использование flex’ов, а также большей части CSS3, которые поддерживает большинство современных браузеров.
Есть еще feature style — CSS grid, но это уже выходит за рамки статьи.
Одна из самых популярных задач в вёрстке — блок фиксированной ширины плюс адаптивный блок.
Old style
Для решения задачи в старом стиле используется следующий подход:
- Создаётся блок (div) и два дочерних блока
- Фиксированный блок идёт первым, которому задаётся фиксированная ширина width: 10rem и свойство float: left (или right, в зависимости от требуемого расположения).
- Адаптивный блок получает свойство float: none , а также отступ равный ширине фиксированного блока margin-left: 10rem (можно задать отступ больше, чем фиксированный блок, чтобы между фиксированным и адаптивным блоком была пустое расстояние).
- Если высота адаптивного блока может быть меньше высоты фиксированного блока, то тогда необходимо у родительского блока поставить явное автовыравнивание высоты (очистка плавающих блоков) с помощью overflow: hidden , или неявно с помощью утилиты clearfix;
Для данного решения важен порядок. Сначала идут плавающие блоки, затем только блок с контентом.
В результате получим:
В данном примере использовались дополнительные стили для создания превью:
В дальнейшем, мы будем опускать дополнительные стили, чтобы не мешать основному решению.
Если высота адаптивного блока меньше фиксированного, то тогда мы получим наезд ниже идущих блоков на родительский блок. Для демонстрации создадим блок под родительским блоком (.box) два абзаца со случайным контентом:
Для решения данной проблемы, воспользуемся утилитой clearfix из bootstrap:
В результате получим:
Отметим, что overflow: hidden привёл к тому же результату с одним лишь исключением, что при всплывающих блоках внутри родительского, контент будет обрезаться.
Преимущества:
- Работает во всех популярных браузерах.
Отметим, что для браузеров каменного века (IE ≤ 8), делается отдельное решение, которое не является частью основного проекта.
Недостатки:
- Невозможность лаконичной реализации дополнительной возможности — одинаковая высота фиксированного и адаптивного блока средствами CSS.
Лучшим решением в старом подходе для данной задачи является создание микро скрипта, который следит за изменением ширины блоков и обновляет высоту блоков.
New style
Основным решением в данный момент является использование flex.
- Создать родительский блок и задать display: flex
- Для фиксированного блока задать свойство display: block и ширину width: 10rem
- Для адаптивного блока задать свойство flex: 1, которое заставляет блок занимать всё доступное пространство
В данном случае, реализация будет следующей:
Откроем в браузере:
Если добавить контент, то можно увидеть, что структура ведёт себя ожидаемо.
Преимущества:
- Порядок элементов является правильным;
- Блоки получают общую высоту, делая колонки одинаковой высоты без какой-либо манипуляции;
- Наезды на другие блоки в данном решении отсутствуют в сравнении со старым подходом.
Недостатки:
- Не работает в старых браузерах, которые не поддерживают flex.
Небольшая демонстрация выше приведенных решений:
Резюме
В данной статье рассмотрели классическую задачу верстки с фиксированным и адаптивным блоком.
Расположение div c фиксированной и процентной шириной в обертке
Проблему описал в картинке. При попытке реализовать данный макет постоянно что то куда то съезжает либо остается без изменений. div с шириной 1000px, в нем два div ширина которых в сумме 400px. Свободно остается 600px, если я третьему блоку указываю 100%, он забирает 100% от родителя. Использовал calc(100% — 400px) всеравно третий блок съезжает вниз. margin and padding 0px;
ВАЖНО! Хотелось бы решение, которое будет работать во всех популярных браузерах.
Так же прошу поделится информацией, где можно почитать\посмотреть про верстку, а именно позиционирование элементов. Я много читал\смотрел. Все понятно все работает, но пытаюсь реализовать свою задумку и все начинает вести себя по другому.
Используя «display: flex» получаю следующее: ширина 174px, хотя в css указал 250px; как так?
Фиксированное позиционирование
Фиксированное позиционирование элемента задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
Для фиксированного позиционирования характерны следующие особенности.
- При прокрутке веб-страницы элемент остаётся на своём исходном месте.
- Положение элемента всегда отсчитывается от области просмотра браузера, независимо от позиционирования родителя.
- При выходе элемента за пределы видимой области справа или снизу от неё, не возникает полос прокрутки и элемент просто «обрезается».
В остальном, значение fixed похоже на absolute .
Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на веб-странице и всегда видны посетителю. В примере 1 показано добавление «шапки», которая остаётся на одном месте независимо от объёма информации на сайте.
Пример 1. Использование fixed
Результат примера показан на рис. 1. Поскольку фиксированный элемент накладывается на текст и скрывает его, добавлен отступ сверху для . Тем самым текст сдвигается вниз на высоту «шапки».
Рис. 1. Фиксированная «шапка»
fixed подобно absolute также может использоваться для вывода диалоговых окон и сообщений, но при этом фиксированное сообщение невозможно прокрутить вверх или вниз, оно всегда остаётся на своём месте. В примере 2 для вывода блока в центре веб-страницы мы позиционируем его с помощью свойств left и top со значением 50%. При этом ровно по центру окажется левый верхний угол, поэтому весь блок смещаем влево и вверх на половину его ширины и высоты с помощью свойства transform. Размеры блока вычисляются автоматически и равны размеру содержимому плюс значения padding .
Похожие публикации:
- Как изменить размер шрифта в css
- Как изменить цвет background css
- Как установить npm node js
- Как установить последовательный порт в arduino ide
Как уменьшить размер блока в css
В большинстве случаев размер блока формируется исходя из размера контента внутри него. Иногда такое поведение не нужно и мы хотим зафиксировать определённые значения. Для этого в CSS можно использовать свойства:
- width — ширина блока
- height — высота блока
В качестве значения принимаются числовые значения и единица измерения. Например,
.block width: 300px; height: 300px; > Теперь элемент с классом block будет иметь ширину и высоту по 300 пикселей
Как зафиксировать размер блока?
Здравствуйте. Проблема следующая: при переходе с главной страницы на страницу поста шапка «сужается» к верху экрана.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
html lang = "ru"> head> title> Клиника /title> link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> link rel="stylesheet" href="/static/css/mainstyle1.css" type="text/css"> /head> body> div class = "header-page"> div id="logo"> img src="ссылка на изображение" alt="Ветеринарная клиника "> /div> h1>Ветеринарная/h1> h1>клиника/h1> div class = "menu"> ul> li>a href = "/mainpage/">Главная/a>/li> li>a href = "/feedback">Отзывы/a>/li> li>a href = "/mainpage/workers">Персонал/a>/li> li>a href = "/mainpage/about">О нас/a>/li> /ul> /div> div class = "user-panel"> ul> div id="username">li>a href = "/mainpage/user/Юзер">Юзер/a>/li>/div> div id="admin">li>a href = "/admin/" target="_blank">Администрирование/a>/li>/div> div id="logout">li>a href = "/logout/">Выйти/a>/li>/div> /div> /div> div class="page-content"> div id="post-button">a href = "/mainpage/post/new/">button>Новая запись/button>/a>/div> div class="post">h2>a href="/mainpage/40/">Пост/a>/h2> p>6 мая 2017 г. 11:08/p> p>Текст поста/p> /div> div class="post">h2>a href="/mainpage/41/">Второй пост/a>/h2> p>6 мая 2017 г. 11:09/p> p>Текст второго поста/p> /div> /div> /body> /html>
Страница поста:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
html lang = "ru"> head> title> Пост /title> link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> link rel="stylesheet" href="/static/css/mainstyle1.css" type="text/css"> /head> body> div class = "header-page"> div id="logo"> img src="Ссылка на изображение" alt="Ветеринарная клиника "> /div> h1>Ветеринарная/h1> h1>клиника/h1> div class = "menu"> ul> li>a href = "/mainpage/">Главная/a>/li> li>a href = "/feedback">Отзывы/a>/li> li>a href = "/mainpage/workers">Персонал/a>/li> li>a href = "/mainpage/about">О нас/a>/li> /ul> /div> div class = "user-panel"> ul> div id="username">li>a href = "/mainpage/user/Юзер">Юзер/a>/li>/div> div id="admin">li>a href = "/admin/" target="_blank">Администрирование/a>/li>/div> div id="logout">li>a href = "/logout/">Выйти/a>/li>/div> /div> /div> div class="page-content"> h1>Пост/h1> p>h3>Текст поста/h3>/p> /div> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
.header-page { background-color: #ff6666; margin-top: -20px; padding: 20px 20px 15px 40px; } .header-page h1 { color: white; padding-left: 280px; line-height: 15px; font-size: 36; font-family: 'Roboto-Slab', serif; } .header-page .user-panel{ padding-left: 800px; margin-top: -70px; } .header-page .user-panel ul{ list-style: none; margin: 0; padding-left: 0; } .header-page .user-panel a{ font-family: 'Roboto-Slab', serif; font-size: 27; color: white; text-decoration: none; } .header-page .user-panel a:hover{ background: #fc5555; padding: 0 10px; } .header-page .user-panel #username, #admin, #logout, #login, #register{ text-align: center; } .header-page .menu{ padding-left: 515px; margin-top: -50px; } .header-page .menu ul{ list-style: none; margin: 0; padding-left: 0; } .header-page .menu li{ display: inline; } .header-page .menu a{ font-family: 'Roboto-Slab', serif; font-size: 27; color: white; margin: 0 20px; text-decoration: none; padding-top: 50px; padding-bottom: 65px; } .header-page .menu a:hover{ background: #fc5555; } .header-page #logo{ padding-left: 90px; margin-bottom: -145px; margin-top: -40px; } .page-content{ padding: 0 20px 0 20px; margin-left: 250px; margin-right: 250px; margin-top: 0px; background-color: white; } .page-content a{ margin-left: 8px; font-family: 'Roboto-Slab', serif; font-size: 27; color: #ff6666; text-decoration: none; } .page-content a:hover{ background-color: #d8d8d8; } .page-content p{ font-family: 'Roboto-Slab', serif; margin-top: 20px; margin-left: 8px; }
В чём корень проблемы и как можно зафиксировать размер шапки?
В вёрстке чуть ли не первый день, буду благодарен за советы.