Как сделать блок резиновым

Чтоб получился резиновый div нужно поставить в CSS:

.container <
margin:0 auto;/*Центрирование блока*/
background:#ccc;/*Цвет блока*/
max-width:1280px;/*Максимальная ширина при больших разрешениях*/
min-width:940px;/*Минимальная ширина при маленьких разрешениях*/
width:auto;/*Ширина в зависимости от разрешения экрана*/
>

Прикрепления: 4965448.png (9.2 Kb)

Как сделать резиновый квадратный DIV css?

Если позволяет поддержка браузерами, то можно так:

Я квадрат

Отслеживать
ответ дан 20 окт 2021 в 23:23
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака

либо дополнительная обертка для элемента либо жс

.container < width: 50%; >.container__wrapper < overflow: hidden; position: relative; width: 100%; padding-bottom: 100%; /* пропорции блока определяются здесь */ display: flex; justify-content: center; /* элемент центрируется */ >.container__content

Отслеживать
8,695 2 2 золотых знака 16 16 серебряных знаков 56 56 бронзовых знаков
ответ дан 18 авг 2017 в 13:09
Oleg Vasiliy Oleg Vasiliy
11 1 1 бронзовый знак

position: relative (А еще, например, можно absolute. тогда нам пофиг на родителя); width: 100%; height: 100%;

так ? Ну и вроде резиновый.

Отслеживать
ответ дан 12 дек 2011 в 18:32
Станислав Комар Станислав Комар
1,987 16 16 серебряных знаков 29 29 бронзовых знаков

так он же не квадратный будет.. стороны будут иметь отношение сторон экрана.. и мне нужно несколько таких квадратиков на странице

12 дек 2011 в 18:34
а, сорри 🙂 Тогда без JS — хз 🙂
12 дек 2011 в 18:38
Автор вопроса, почему отметил это сообщение как лучший? ниже есть гораздо лучшие ответы.
10 дек 2018 в 9:41

Как сделать резиновый квадратный DIV css?

Написать две строчки:

Отслеживать
ответ дан 29 янв 2021 в 16:10
Sevastopol’ Sevastopol’
28.2k 12 12 золотых знаков 76 76 серебряных знаков 143 143 бронзовых знака

css
html
вёрстка

Важное на Мете

Связанные

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Фиксированная и резиновая верстки

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

Для решения этой задачи возникло два подхода: первый, при увеличении размеров окна, мы растягиваем контент(резиновая верстка), второй делаем контейнер с фиксированными размерами и спокойно работает внутри него(фиксированная верстка). Оба подхода используются и по сей день, хотя бы как этапы адаптивной верстки.

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

.container < width:980px; margin:0 auto; >

В резиновой верстке ширина задается в процентах

.container_fluid < width:100% >

Давайте посмотрим, что мы можем сделать с этим на практике.

В фиксированной верстке центральный блок имеет ширину обычно 980px, так чтобы помещаться на мониторы с любым разрешением, включая iPhone и iPad.

Резиновая верстка создается следующим образом. Когда Вы задаете ширину блока в процентах, проценты считаются от ширины родительского блока. Если Вы поместите такой блок внутрь body, то его ширина будет пропорциональна ширине экрана.

С вложенными блоками у нас есть два варианта — сделать их фиксированной ширины, а отступы между ними сделать резиновыми, либо сделать их пропорциональными ширине блока

Внутри одного сайта, мы можем комбинировать элементы резиновой и фиксированных версток.

Например, в приведеном ниже макете голубые полоски являются резиновыми и занимают всю ширину экрана, а блок по центру соответствует фиксированной верстке.

min-width и min-height

Если мы задали ширину блока в процентах, то при сжатии окна блок также будет сжиматься. Если мы хотим остановить этот процесс обжатия блока на каком-то моменте, чтобы, например, чтобы не страдал контент блока, можно задать минимальную возможную ширину блока

например вот так

.container_fluid < width:100%; min-width:980px; >

calc

Давайте рассмотрим следующий шаблон

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

Серый блок мы можем задать в процентах, но вот с белым блоком все сложнее. Его ширина — это ширина серого блока минус фиксированная ширина синего блока.

Для этого нам может пригодиться функция calc

Допустим ширина родительского блока 100%, ширина левой колонки 200px. Тогда ширину правой колонки мы можем записать как

width:calc(100% - 200px)

НАЛИЧИЕ ПРОБЕЛОВ КРИТИЧНО!

Пропорциональное изменение ширины и высоты

Допустим наш шаблон выглядит вот так

Если блоки резиновые при сжатии, мы получим следующую картину

Происходит это потому, что ширина блоков при сжатии уменьшается, а вот высота остается неизменной. Даже если мы поставим высоту в процентах — это оставит ситуацию без изменений, так так высота сайта при его сжатии не изменяется.

Хотелось бы, чтобы блоки уменьшались пропорционально, то есть квадраты оставались бы квадратами

Добиться этого можно следующим образом. Поставить высоту блока 0px, а padding-top равным ширине. Например

.chained_sizes_block < height:0px; width:25%; padding-top:25%; >

 div class="chained_sizes_block"> div>

Если Вы попробовали реализовать данную схему, нам остается понять, почему это работает:) Дело в том, что padding, указанный в процентах высчитывает эти проценты не от ширины самого блока, а от ширины блока-родителя, точно также как и ширина. Поэтому 25% в padding-top’e будут равны 25% ширины.

Фиксированные и резиновые верстки в дизайне

Если Вы верстаете сайт по PSD-шаблону или другому графическому файлу, у Вас может возникнуть вопрос — какую верстку хотел применить дизайнер? Если дизайнер имеет хотя бы минимальный опыт в веб-дизайне — ответ прост. Если у элемента нет полей по бокам — подразумевается его резиновость. Если поля есть, значит скорее всего верстка фиксированная.

Практика:

Резиновый шаблон с фиксированной левой колонкой
Резиновый шаблон с двумя фиксированными колонками по бокам
«Резиновая» галерея картинок
Сделать, чтобы картинки были резиновые, а отступы между ними были фиксированные(шаблон должен занимать весь экран)
Сделать два квадрата. Меньший квадрат должен быть посередине по вертикали и горизонтали меньшего
Используя calc выровнять блок по центру экрана
Сверстать шаблон сайта. Сайдбар справа фиксированный по ширине, синий хедер резиновый, блоки контента фиксированные по ширине и выровнены посередине хедера.
Шаблоны c http://signature.ai/

results matching » «

No results matching » «

Гибкие элементы — CSS: Адаптивность сайта

В первом проекте создавалась страница с фиксированной шириной в 1000 пикселей. Такой подход имеет право на жизнь, но что случится, если такой макет открыть на устройстве, разрешение которого меньше 1000 пикселей по ширине? В таком случае появится горизонтальный скролл, который раздражает пользователей.

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

Создадим контейнер с шириной 800 пикселей, добавим немного стилей и текста. Внутри контейнера расположим три блока с шириной 245 пикселей:

В этом примере суммарно блоки занимают 735 пикселей. Представим, что размер страницы изменился и теперь равен 700 пикселей. В этом случае все три блока не вместятся на страницу. Вместо этого появится горизонтальная прокрутка:

Для эмуляции поведения браузера на контейнере используется свойство oveflow-x , которое скроет контент и добавит полосу прокрутки. Думайте о блоке .container как о браузере.

Когда компьютеры и интернет только появлялись, то разрешения экрана были почти стандартизированы. Использовалось несколько основных разрешений и разработчики могли фиксировать размеры элементов. С появлением мобильных устройств, ноутбуков, планшетов таких разрешений стало так много, что фиксировать размеры целых блоков стало неудобно. Постоянно появлялись полосы прокруток, и если вертикальная прокрутка воспринимается хорошо, то горизонтальная бесит пользователей.

Разработчикам стало важно опираться не на конкретные размеры, а высчитывать их исходя из размеров экрана. Для этого можно использовать проценты — вместо указания размера блока в пикселях можно высчитывать размер в процентах от родительского блока или от текущего разрешения экрана устройства.

Такой подход получил название резиновая (fluid) вёрстка.

Сделаем три блока резиновыми. Для этого уберём фиксированную ширину в 245 пикселей и заменим значение на 33%. Таким образом три блока займут почти всё доступное пространство:

Изменяя размер страницы или блока будет меняться и размер блока с резиновой вёрсткой. Эта особенность используется и при создании адаптивного сайта.

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

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях:

Как сделать блок резиновым