Растягивающийся по высоте div: Как сделать резиновый див по высоте? — Хабр Q&A

Leave a Comment / Разное / By /

5. Фиксированная и резиновая верстки · Неожиданный HTML

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

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

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

.container {
    width:980px;
    margin:0 auto;
}

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

.container_fluid {
    width:100%
}

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

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

Примеры сайтов:

http://alawar.ru
http://film.ru

Резиновая верстка создается следующим образом. Когда Вы задаете ширину блока в процентах, проценты считаются от ширины родительского блока. Если Вы поместите такой блок внутрь 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>
    </div>

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

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

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

Пример бесплатных PSD-шаблонов можно найти на сайте http://freebiesbug.com/psd-freebies/website-template/

Практика:

  1. Резиновый шаблон с фиксированной левой колонкой

  2. Резиновый шаблон с двумя фиксированными колонками по бокам

  3. «Резиновая» галерея картинок

  4. Сделать, чтобы картинки были резиновые, а отступы между ними были фиксированные(шаблон должен занимать весь экран)

  5. Сделать два квадрата. Меньший квадрат должен быть посередине по вертикали и горизонтали меньшего

  6. Используя calc выровнять блок по центру экрана

  7. Сверстать шаблон сайта. Сайдбар справа фиксированный по ширине, синий хедер резиновый, блоки контента фиксированные по ширине и выровнены посередине хедера.

  8. Шаблоны c http://signature.ai/

Блочная верстка сайта css, фиксированный и резиновый дизайн

Цель урока: Знакомство с блочной версткой CSS. Получение навыков использования блочной верстки сайта

Содержание:

  • Блочная верстка сайта
    • Отличительные черты от табличной верстки
  • Фиксированный дизайн или жесткая блочная верстка (две колонки)
  • Фиксированный дизайн для трех колонок
    • Использование свойства float для макета в три колонки
    • Использование позиционирования слоев для макета в три колонки

Блочная верстка сайта

  • При работе со слоями или, иначе говоря, блоками и элементами div, основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
  • К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак — это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:

  1. Высота слоев div ограничена высотой контента:
    2. Табличная версткаБлочная верстка
  2. В случае, когда содержимое слоя превышает его установленную высоту, то браузеры по-разному ведут себя — одни увеличивают высоту слоя под новый контент, а другие, оставляя высоту первоначальной, накладывают контент поверх слоя.

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


жесткая блочная верстка (две колонки)
  • Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
  • Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
  • Основной блок с контентом размещается по центру, тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

Рис.1. Пример фиксированного дизайна

  • Общая ширина может выбираться дизайнером, что называется «на глаз», или после сбора каких-либо дополнительных сведений.

    • Пример: создать фиксированный дизайн сайта на основе представленного выше изображения

    Выполнение:

    • «Разбиваем» все основные элементы страницы на блоки следующим образом:
      • блок 1 — слой первый (id="shapka"),
      • блок 2 и 3 заключаются в единый блок (id="container"),
      • блок 2 — слой с меню (
        id="menu"        ),
      • блок 3 — слой с контентом (id="content"),
      • блок 4 — слой с id="bottom".

    Схематично изобразим расположение блоков:

    <body>
<div>1</div>
<div>
	<div>2</div>
	<div>3</div>
</div>
<div>4</div>
</body>

    1. Задаем свойства «шапки» (блок 1)

    1. либо напрямую задав значение свойству height в пикселях, процентах или др. единицах;

      2. например, для верхнего слоя «шапки»:

        height: 50px;
    2. либо задать высоту при помощи отступа

      3. например:

        padding-top: 15px; 
  padding-bottom: 15px;

    Весь код для шапки:

    #shapka{
  text-align: left; /* Выравнивание внутреннего контента по левому краю */
  width: 750px; /* Ширина блока и общая ширина*/
  background: #900000; /* Цвет фона */
  height: 50px; /* Высота блока */
  margin-right: auto; /* Авто-отступ справа */
  margin-left: auto; /* Авто-отступ слева */
  padding: 10px; /* Внутренние поля вокруг содержимого */
 }

    2. Создаем свойства контейнера

    3. Создаем свойства для блока 2 — меню

    4. Создаем свойства для блока 3 — контент

    5. Создаем свойства для блока 4 — «подвал»

    Итоговый код: всё вместе

    <style type="text/css">
    /* для блока 1 - шапка */
#shapka{
  text-align: left; /* Выравнивание внутреннего контента по левому краю */
  width: 750px; /* Ширина блока и общая ширина*/
  background: #900000; /* Цвет фона */
  height: 50px; /* Высота блока */
  margin-right: auto; /* Авто-отступ справа */
  margin-left: auto; /* Авто-отступ слева */
  padding: 10px; /* Внутренние поля вокруг содержимого */
}
/* для контейнера */
#container {
  width: 770px; /* Ширина слоя или ширина макета+20px */
  margin-right: auto; /* Авто-отступ справа */
  margin-left: auto; /* Авто-отступ слева */
 }
/* для блока 2 - меню */
#menu {
  width: 200px; /* Ширина слоя */ 
  float: left; /* Обтекание с соседним слоем */ 
  color: white; /* Цвет текста */
  background: #008080; /* Цвет фона */
  padding: 10px; /* Внутренние поля вокруг содержимого */
 }
/* для блока 3 - контент */
#content { /* Правая колонка*/ 
    width: 530px; /* Ширина слоя */ 
    float: left; /* Обтекание с соседним слоем */ 
    padding: 10px; /* Внутренние поля вокруг содержимого */ 
    background: #e0e0e0; /* Цвет заднего фона */  
   } 
/* для блока 4 - подвал */
#bottom{
	width:750px; /* Ширина слоя */ 
	clear:left; /* возвращаем блочность и располагаем слой слева */
	padding: 10px; /* Внутренние поля вокруг содержимого */
	background:#444;
	color:#fff;
	margin-right: auto; /* Авто-отступ справа */
    margin-left: auto; /* Авто-отступ слева */
}
    </style>
</head> 
<body>
<div>1</div>
<div>
	<div>2</div>
	<div>3</div>
</div>
<div>4</div>
</body>

    Результат:

    Рис. 2. Жесткая блочная верстка из двух колонок

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

    При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:

    1. Использование свойства float для расположения колонок рядом.
    2. Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.

    Рассмотрим первый случай.

    Использование свойства float для макета в три колонки

    На рис. 3 — результат использования свойства float для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.

    Рис. 3. Фиксированный дизайн в три колонки

    Пример: создать веб-страницу с макетом из трех колонок, изображенную на рис. 3. Использовать приемы фиксированного блочного макетирования

    Выполнение:

    1. Создание структуры html-кода

    • Определим для заголовков три слоя (#header. ..) и для колонок три слоя (#col...).
    • Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
    • Получим схематичное изображение расположения блоков:

    Получим следующую html-структуру:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <body>
<div>
    <div>Евгений Евтушенко</div>
    <div>Валерий Брюсов</div>
    <div>Эдуард Асадов</div>
  </div>
  <div>
    <div>
		Мне снится старый друг,<br/>который стал врагом,<br/>
		но снится не врагом,<br/>а тем же самым другом.<br/>
		Со мною нет его,<br/>но он теперь кругом,<br/>
		и голова идет<br/>от сновидений кругом.
	</div>
    <div>
	Великое вблизи неуловимо,<br/>Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>И видим лишь случайное звено. 
	</div>
    <div>
	В любых делах при максимуме сложностей<br/>Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>А нежеланье - множество причин.
	</div>
  </div>
</body>

    2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)

    • Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.
      •  #header1, #header2, #header3, #col1, #col2, #col3 {
    width: 250px; /* Ширина колонок */
}
    • Добавим внутренние поля (отступы от содержимого текста) — padding и внешние отступы, чтобы обеспечить зазор между колонками. Поскольку свойства задаются сразу для все колонок одновременно, а сам весь макет не центрируется, а выравнивается по левому краю, то установим отступ только с одной стороны — левой — у всех колонок одновременно (margin-left).
      •  #header1, #header2, #header3, #col1, #col2, #col3 {
    width: 250px; /* Ширина колонок */
    padding: 5px; /* Поля вокруг текста */
    margin-left: 5px; /* Отступ слева */
   }
    • Добавим также внешний отступ сверху, обеспечив зазор по вертикали между заголовками и колонками, а также отступ заголовков от верха страницы (margin-top).
      •  #header1, #header2, #header3, #col1, #col2, #col3 {
    ...
    margin-top: 2px; /* Отступ сверху */
   }
    • Для того, чтобы блочные теги div, расположились рядом друг с другом, необходимо задать им обтекание — float.
      •  #header1, #header2, #header3, #col1, #col2, #col3 {
    ...
    float: left; /* Состыковка колонок по горизонтали */
   }
    • Добавляем границу для блоков (border) и и задаем параметры шрифта (font-family, font-weight, font-size, color).
      •  #header1, #header2, #header3, #col1, #col2, #col3 {
    ...
    border: 1px solid black; /* Рамка вокруг слоя */
    font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
   }

      Получим код:

       #header1, #header2, #header3, #col1, #col2, #col3 {
    width: 250px; /* Ширина колонок */
    padding: 5px; /* Поля вокруг текста */
    margin-left: 5px; /* Отступ слева */
    margin-top: 2px; /* Отступ сверху */
    float: left; /* Состыковка колонок по горизонтали */
    border: 1px solid black; /* Рамка вокруг слоя */
    font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
}
    • Установим задний фон отдельно для каждого селектора.
      •    #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

    Смотрим промежуточный результат:

    Рис. 4. Промежуточный результат

    3. Задание стиля для контейнеров

     #col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
   }

    Итоговый код: всё вместе

    <style type="text/css">
    /* для колонок и их заголовков */
 #header1, #header2, #header3, #col1, #col2, #col3 { 
     width: 250px; /* Ширина колонок */
    padding: 5px; /* Поля вокруг текста */
    margin-left: 5px; /* Отступ слева */
    margin-top: 2px; /* Отступ сверху */
    float: left; /* Состыковка колонок по горизонтали */
    border: 1px solid black; /* Рамка вокруг слоя */
    font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
   }
   /* для колонок */
   #col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
   } 
 
   /* Цвет фона каждого слоя */
   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }
 
   . container { 
     clear: both;  /* Отменяет действие float */ 
   }
    </style>
</head> 
<body>
<div>
    <div>Евгений Евтушенко</div>
    <div>Валерий Брюсов</div>
    <div>Эдуард Асадов</div>
  </div>
  <div>
    <div>
		Мне снится старый друг,<br/>
		который стал врагом,<br/>
		но снится не врагом,<br/>
		а тем же самым другом.<br/>
		Со мною нет его,<br/>
		но он теперь кругом,<br/>
		и голова идет<br/>
		от сновидений кругом.
	</div>
    <div>
	Великое вблизи неуловимо,<br/>
	Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>
	И видим лишь случайное звено.
	</div>
    <div>
	В любых делах при максимуме сложностей<br/>
	Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>
	А нежеланье - множество причин.
	</div>
  </div>
</body>

    Результат:

    Рис. 5. Результат

    Использование позиционирования слоев для макета в три колонки

    Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).

    Рис. 6. Позиционирование слоев для макета в три колонки с разделителем

    Пример: создать веб-страницу с макетом из трех колонок с разделительной линией, изображенную на рис. 6. Использовать приемы фиксированного макетирования с позиционированием слоев

    Выполнение:

    1. Создание структуры html-кода

    • Для данного макета достаточно создать три слоя div для каждой колонки.

    Поэтому структура будет простой:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <body>
<div>Иван Бунин</br></br>
	На окне, серебряном от инея,</br>
	За ночь хризантемы расцвели.</br> 
	В верхних стёклах - небо ярко-синее</br> 
	И застреха в снеговой пыли.  
</div>
<div>
	Всходит солнце, бодрое от холода, </br>
	Золотится отблеском окно. </br>
	Утро тихо, радостно и молодо. </br>
	Белым снегом всё запушено. 
</div>
<div>
	И всё утро яркие и чистые</br> 
	Буду видеть краски в вышине, </br>
	И до полдня будут серебристые </br>
	Хризантемы на моём окне.</br></br> 
 
	1903
</div>
</body>

    2. Добавление стилей для колонок

    #col1, #col2 {
     border-right: 1px solid #000; /* Параметры линии справа от текста */ 
    }

    Итоговый код: всё вместе

    <style type="text/css">
    #col1, #col2, #col3 {
     width: 250px; /* Ширина колонок */
     padding: 0 6px; /* Поля по вертикали и горизонтали */
     float: left; /* Обтекание слоев */
    } 
#col1, #col2 {
     border-right: 1px solid #000; /* Параметры линии справа от текста */ 
    }
    </style>
</head> 
<body>
<div>Иван Бунин</br></br>
	На окне, серебряном от инея,</br>
	За ночь хризантемы расцвели. </br> 
	В верхних стёклах - небо ярко-синее</br> 
	И застреха в снеговой пыли. 
</div>
<div>
	Всходит солнце, бодрое от холода, </br>
	Золотится отблеском окно. </br>
	Утро тихо, радостно и молодо. </br>
	Белым снегом всё запушено. 
</div>
<div>
	И всё утро яркие и чистые</br> 
	Буду видеть краски в вышине, </br>
	И до полдня будут серебристые </br>
	Хризантемы на моём окне.</br></br> 
 
	1903
</div>
</body>

    Дизайн в три колонки готов!

    Как растянуть div по размеру контейнера?

    Улучшить статью

    Сохранить статью

    • Последнее обновление: 12 янв, 2023

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Дочерний div внутри контейнера может принимать полную ширину и высоту родительского div. Существует два метода растянуть div по размеру контейнера с помощью CSS, которые обсуждаются ниже:

    Метод 1: Первый способ — просто назначить 100 % ширины и 100 % высоты дочернему div, чтобы он занял все доступное пространство родительского div.

    Consider this HTML for demonstration:

    HTML

    < html lang = "en" >

     

    < головка >

    < Стиль >

    . Container {

    Высота: 400PX;

                 цвет фона: зеленый;

    }

    . NUM1 {

    ФОНАЛЬНОСТЬ: Желтый;

                 высота: 100 %;

                 ширина: 100%;

             }

         style >

     

    head >

     

    < body >

         < дел. Класс = "Контейнер" >

    < Div Класс = " .

    Div >

    Div >

    >

    >

    >

    .0036 >

    HTML >

    . -row и отобразить атрибут родительского контейнера в таблице , которая займет всю высоту, доступную из родительского элемента div. Чтобы покрыть всю ширину, мы можем сделать ширину родительского div равной 100%.

    HTML

    < html lang = "en" >

     

    < head >

    < Стиль >

    . Container {

    HEISH: 200PX;

                 цвет фона: зеленый;

                 дисплей: таблица;

                 ширина: 100%;

    }

    .NUM1 {

    ФОНАЛЬ: Greenyellow;

                 дисплей: таблица-строка;

             }

         style >

    head >

     

    < body >

    < раздел класс = "контейнер" >

             9003

    036 class = "num1" >

                 Добро пожаловать в GFG.

             div >

         div >

    body >

     

    HTML >

     
     

    Вывод:


    Свойство изменения размера CSS

    ❮ Назад Полное руководство по CSS Далее ❯


    Пример

    Здесь пользователь может изменить размер элемента

    как по высоте, так и по ширине:

    div {
      изменить размер: оба;
      переполнение: авто;
    }

    Попробуйте сами »

    Другие примеры "Попробуйте сами" ниже.

    Определение и использование

    Изменение размера определяет, можно ли (и как) изменить размер элемента с помощью пользователь.

    Примечание: Свойство изменить размер не применяется к строчным элементам или блочные элементы, где overflow="visible". Итак, убедитесь, что для переполнения установлено значение «прокрутка», «авто» или «скрытый».

    Значение по умолчанию: нет
    Унаследовано: нет
    Анимация: № Читать о анимированный
    Версия: CSS3
    Синтаксис JavaScript: объект .style.resize="оба" Попробуй

    Поддержка браузера

    Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

    Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.

    Собственность
    изменить размер 4,0 79,0 5,0
    4,0 -моз-    		 4,0 15,0

    Синтаксис CSS

    изменение размера: нет|оба|горизонтальный|вертикальный|начальный|наследовать;

    Значения свойств

    Значение Описание Демо
    нет Значение по умолчанию. Пользователь не может изменить размер элемента Играй »
    оба Пользователь может изменять размер как высоты, так и ширины элемента Играй »
    горизонтальный Пользователь может изменять ширину элемента Играй »
    вертикальный Пользователь может изменять высоту элемента Играй »
    начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный Играй »
    унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

    Другие примеры

    Пример

    Разрешить пользователю изменять размер только высоты элемента

    :

    дел. {
      изменить размер: по вертикали;
      переполнение: авто;
    }

    Попробуйте сами »

    Пример

    Разрешить пользователю изменять размер только ширины элемента

    :

    div {
      изменить размер: по горизонтали;
      переполнение: авто;
    }

    Попробуйте сами »

    Пример

    Во многих браузерах размер