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

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

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

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

Резиновый div

Там может быть только один див с ид=тест4, ну если следовать спеке хтмл.

Длина это высота или ширина? Всю длину чего?

ya-betmen ★★★★★
( 05.06.19 20:15:35 MSK )
Последнее исправление: ya-betmen 05.06.19 20:17:22 MSK (всего исправлений: 1)

Ответ на: комментарий от ya-betmen 05.06.19 20:15:35 MSK

Там может быть только один див с ид=тест4, ну если следовать спеке хтмл.

Riniko ★★
( 05.06.19 20:18:04 MSK ) автор топика
Ответ на: комментарий от ya-betmen 05.06.19 20:15:35 MSK

Длина это высота или ширина? Всю длину чего?

Riniko ★★
( 05.06.19 20:25:40 MSK ) автор топика

Всё крайне коряво и неграмотно. Изучи хорошую книгу по CSS сперва. И открой для себя flexbox с grid, настоящее и будущее вёрстки, с ними подобные вещи делаются в пару строк.. И да, id уникален, он может быть только у одного элемента на странице, используй class вместо него.

Вот, правка на быструю руку.

#test1 < width: 100%; height: auto; min-height: 640px; margin: 0; padding: 15px 0; background-color: #FF6347; >#test2 < width: 100%; height: inherit; >#test3 < width: 98%; max-width: 1000px; height: inherit; left: 17%; margin: 0 auto; >#test4 < width: 98%; position: static; max-width: 1000px; padding: 10px; left: 17%; background-color: #FFFFFF; >#test4:not(:last-child) < margin-bottom: 15px; >#test5

enso ★★★★★
( 05.06.19 21:06:03 MSK )
Последнее исправление: enso 05.06.19 21:11:07 MSK (всего исправлений: 1)

Ответ на: комментарий от enso 05.06.19 21:06:03 MSK

Riniko ★★
( 05.06.19 21:14:17 MSK ) автор топика
Ответ на: комментарий от enso 05.06.19 21:06:03 MSK

И да, id уникален, он может быть только у одного элемента на странице, используй class вместо него

Судя по тому что делаю (пишу несколько одинаковых id), они корректно отображаются. В чём принципиальная разница между Id и class? Гуглил, но на практике использование одинаковых id в рамках одной страницы не ломает вёрстку. Или я чего-то не знаю?

Riniko ★★
( 05.06.19 21:38:00 MSK ) автор топика
Ответ на: комментарий от Riniko 05.06.19 21:38:00 MSK

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

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

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

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

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

.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 » «

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

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

Я квадрат

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

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

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

Отслеживать
8,644 2 2 золотых знака 16 16 серебряных знаков 55 55 бронзовых знаков
ответ дан 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.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака

css
html
вёрстка

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

Связанные

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

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

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

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

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