Растянуть по высоте div: Как растянуть div на 100% по вертикали (CSS)

html — Как растянуть блок на всю высоту страницы?

Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:

* {
  margin: 0;
  padding: 0;
}
html,
body,
.wrapper {
  height: 100%;
}
.content {
  box-sizing: border-box;
  min-height: 100%;
  padding-bottom: 90px;
}
.footer {
  height: 80px;
  margin-top: -80px;
}

И разметка:

<div>

    <div>

        <p>ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй </p>
        <p>ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц </p>
        <p>ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу </p>
        <p>ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк </p>
        <p>еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее </p>
    </div>

    <div></div>

</div>

При этом min-height: 100% работает ТАК:

1. Если СОДЕРЖИМОГО МАЛО у блока content, то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта (wrapper — это 100% от высоты body, body — это 100% от высоты html, а html — это 100% от высоты viewport). При этом у блока content есть нижний paddind-буфер отрицательный, а у блока блока footer есть отрицательный margin, который позволяет в случае, когда много содержимого, «наползти» на этот padding-буфер.

2. Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке content), то высота определяется содержимым — содержимое растягивает.

Еще раз повторю, чтобы все запомнили — если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше — пожалуйста, если сможешь растянуть содержимым), если много — высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.

div на всю высоту экрана

Автор admin На чтение 5 мин.

Ширина и высота экрана на CSS

Растянуть блок на всю ширину и высоту окна браузера можно с помощью:

1. position: fixed; . Пример: онлайн линейка.
2. единиц vw и vh
3. начальной width и height тега html . По умолчанию height любого тега, в том числе html и body , равна его содержимому. Для того, чтобы элемент имел min-height: 100%; , должна быть указана height его родителя.

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]

Блок шириной на весь экран монитора выровнять по центру окна браузера

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

Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:

Картинка на весь экран CSS

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

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

Вопрос по CSS . Задача: есть высокий блок-контейнер, он по высоте не помещается на один экран (например, div , в котором много параграфов), надо задать фон этому блоку-контейнеру, чтобы он был закрашен полностью.

Нашел вот такое решение: задать всем блокам-родителям height: 100%; , а блоку-контейнеру задать min-height: 100%; . Вот пример:

Не понимаю, почему это работает. Похоже на «шаманство». min-height задает минимальную высоту. Получается, что минимальная высота содержимого дива равна 100% высоты содержимого div . Посмотрел в devtools, выяснилось, что div может быть по высоте больше, чем body и html .

2 ответа 2

Почему это работает?

Потому что div просто переполняет (вылазит за границы) body и всё. Задавая overflow: hidden; для body мы увидим, что div просто обрезается (если высота экрана небольшая).

Как с этим быть?

Это задавание height: 100%; блокам всех уровней вложенности довольно неудобно. Задайте просто нужному вам блоку min-height: 100vh; , где vh — единицы высоты экрана. У body тогда будет по умолчанию height: auto; и body просто будет подстраиваться под содержимое.

Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:

При этом min-height: 100% работает ТАК:

Если СОДЕРЖИМОГО МАЛО у блока content , то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта ( wrapper — это 100% от высоты body , body — это 100% от высоты html , а html — это 100% от высоты viewport ). При этом у блока content есть нижний paddind -буфер отрицательный, а у блока блока footer есть отрицательный margin , который позволяет в случае, когда много содержимого, «наползти» на этот padding -буфер.

Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке content ), то высота определяется содержимым — содержимое растягивает.

Еще раз повторю, чтобы все запомнили — если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше — пожалуйста, если сможешь растянуть содержимым), если много — высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.

К поиску ответа на вопрос «Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS» обычно обращаются в двух случаях. Во-первых, чтобы соблюсти требование закона и скрыть контент от пользователей не доросших для его просмотра. Во-вторых для того, чтобы оградить контент своего сайта от копирования. В данной статье рассмотрим то, как создать такой div , который перекрывает всю страницу и которым можно спрятать весь контент, а можно просто его уберечь от простого копирования. Но всё это конечно легко обходится, поэтому для себя я озадачился этим вопросом только для того, чтобы соблюсти закон на части своих страниц одного проекта (где про алкоголь и сигареты — иначе Google AdSense ругается).

Рабочий пример css-кода с блокирующим весь экран div (на всю ширину и всю высоту экрана)

Сразу приведу готовый код страницы с блокирующим весь экран div , который занимает всю ширину и всю высоту экрана (при условии, что у тега не переопределены высота и ширина, так как div наследует высоту и ширину от body , в котором он располагается):

Где разместить и как обозначить div , блокирующий всю ширину и высоту экрана

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

Растягивание блока на пустое пространство родительского элемента (div expand)

Сегодня столкнулся с неприятной проблемой — при блочной верстке понадобилось растянуть блок на пустое пространство родительского элемента по вертикали (div expand). Естественно, по горизонтали никакой трудности нету — просто задать отображение блочным (display: block) и будет счастье =).

Но тут другое. Есть родительский div, в нем три div’а (три колонки — средняя — контент, справа и слева — панели). Получается, что колонка с контентом может быть неограниченного размера, и надо подстроить размер боковых div’ов под нее (для чего? например, чтобы банально изменить цвет). Думал, height: 100% и счастье. Оказалось, все немного сложнее — при таком процентном указании высоты размер дива будет просто видимый размер окна со всеми вытекающими последствиями.

У необходимого свойства (которое позволяет решить поставленную задачу) нет единой поддержкой разными браузерами. Поэтому надо прописывать отдельно для каждого.
Идея простая: для родительского div’а надо задать display, который разрешит растягивание внутренних элементов (-moz-box, -webkit-box, -ms-flexbox — в зависимости от браузера), а внутри блока, который надо растянуть задать значения -moz-flex-box, -webkit-flex-box, ms-flex, и т.д. (тоже в зависимости от браузера).

Свободное пространство родителя делится на сумму значений -moz-flex-box, -webkit-flex-box или ms-flex всех непосредственных потомков и распределяется между ними пропорционально их значениям.

Наша задача упрощена тем, что вертикально div’ов по одному.

Вот что получилось:

.parent_div {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.left_div,
.right_div {
  -moz-flex-box: 1;
  -webkit-flex-box:1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  width: 200px;
}
.central_div{
  width: 100%;
}

11/07/2013

HTML/CSS

12143

Как растянуть SVG картинку только по высоте при фиксированной ширине — Блого-дарю

Тема справедлива так же для растягивания ширины при неизменной высоте. На самом деле задача немного специфичная, ведь зачем сознательно искажать картинку/иконку, тем не менее случаи бывают разные. В моем случае нужно было сделать блок, который при наличии контента растягивался бы по высоте и его «уголок» был адаптивным. Саму рабочую конструкцию вставлять не буду, т.к. запись не об этом, а о самом вопросе растягивания svg по одной из сторон, поэтому в качестве предполагаемого результат добавлю только изображение:

Кратко общими словами: конструкция состоит из прямоугольного div’a и svg — уголка справа. Так вот при первичном решении svg никак не удавалось растянуть исключительно по высоте, оставив фиксированную ширину. Решение нашлось в атрибуте:

preserveAspectRatio=»none»

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

See the Pen OvZJrP by Sergey (@norzserge) on CodePen.

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

P.S. К слову сказать, до решения с растягиванием SVG были предприняты попытки:
— добавить блок с background картинкой-уголком, но при растягивании бэкграунда, картинка заметно искажалась — fail
— нарисовать в background этот треугольник градиентом, но при растягивании сторона треугольника превращалась в лесенку — fail
— вариант с псевдо элементами подходит только при фиксированной высоте блока, в котором находится контент, так что тоже не прокатило
— еще пара извращений, о которых даже писать не хочу

В общем самым действенным оказалось использование svg с атрибутом preserveAspectRatio=»none»

Как растянуть объект в Автокад, команда Растянуть

02 нояб2019

Как растянуть объект в Автокад, команда Растянуть

02 ноября 2019. Автор статьи: Евгений Курицин. Категория: #РЕДАКТИРОВАНИЕ

«Как растянуть объект(ы) в Автокад не нарушая их взаимосвязи?» — ответ один, — команда «Растянуть».

В видеоуроке рассмотрим.

• Способы вызова команды «Растянуть» в Автокад.
• Особенности выделения объектов при выполнении команды «Растянуть».
• Принцип работы в Автокад команды «Растянуть».
• Ограничения команды «Растянуть».

Видео «Как растянуть объект в Автокад — Команда Растянуть»

Как сделать отступ сверху CSS?

Приветствую вас, дорогие посетители, на сайте Impuls-Web!

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

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

Навигация по статье:

Внешний отступ сверху CSS

Для задания внешнего верхнего отступа используется CSS-свойство margin-top, значение которого можно задать в px (пикселях), em, % и других доступных в CSS единицах измерения.

В одной из мох прошлых статей я уже рассказывала, как можно использовать свойство margin. С этой статьей вы можете ознакомиться, перейдя по этой ссылке.

Пример использования:

.margin-block{
margin-top:50px;
}

Аналогично, для выравнивания блока вы можете использовать свойства margin-left, margin-right, margin-bottom. Так же можно указать свойство margin, и задать для него четыре параметра, по часовой стрелке начиная с верхней стороны, соответственно для каждой из сторон:

margin: 20px 50px 30px 50px;

margin: сверху справа снизу слева

Внутренний отступ сверху CSS

В ситуации, когда нам нужно выровнять контент по вертикали, относительно родительского блока мы можем использовать свойство padding-top, которое задает внутренний отступ сверху CSS. Параметры свойства задаются аналогично свойству margin в px, em, % и т.д.

Пример:

.padding-block{
padding-top: 50px;
}

Аналогично свойству margin, свойство padding можно использовать для задания отступов с других сторон блока по отдельности: padding-left, padding-right, padding-bottom. А так же можно задавать расстояния для всех сторон одновременно:

padding: 20px 50px 30px 50px;

В этом случае значения задаются аналогично как и для margin начиная сверху, а дальше по часовой стрелке (справа, снизу, слева)

Используя, в зависимости от ситуации, показанные в статье способы задания отступов сверху CSS-свойствами margin и padding, вы сможете расположить необходимые вам блоки на странице своего сайта именно так как вам нужно.

Надеюсь, данная статья будет для вас полезна! Не забывайте оставлять комментарии и делиться статьей в соцсетях.
А на сегодня у меня все! Успехов вам и до встречи в следующих статьях!

С уважением Юлия Гусарь

css — Растянуть вложенный div до 100% от оставшейся высоты

контейнера.

Я потратил слишком много времени, пытаясь понять это, но, клянусь Джорджем, я понял!

Момент «Эврика» — это чтение других вопросов, в которых люди спрашивали: «Как я могу сделать это без , используя таблицы?» Потому что, конечно, этот макет прост с таблицами. Но это напомнило мне об отображении : таблица .

Как красиво утверждается в этом сообщении в блоге, использование display: table дает вам макеты таблиц без неприятных накладных расходов на разметку, как макеты таблиц HTML, позволяя вам иметь семантический код и разные макеты для разных медиа-запросов.

В итоге мне пришлось внести одно изменение в разметку: обертку

  кузов {
    переполнение-y: прокрутка;
    переполнение-x: скрыто;
}
body, html {
    высота: 100%;
}
.container {
    дисплей: таблица;
    ширина: 100%
    высота: 100%; / * это будет рассматриваться как минимум!
                     Он будет растягиваться по размеру содержимого * /
}
div.wrapper {
    дисплей: таблица-строка;
    высота: 0 пикселей; / * берем как можно меньше,
                   пока все еще соответствует содержимому * /
}
img {
    дисплей: таблица-ячейка;
    ширина: 100%; /*масштабироваться в соответствии*/
}
.Нижний {
    дисплей: таблица-ячейка;
    высота: 100%; / * берем как можно больше * /
}
  

  


    



  
 Заголовок 
  


  

   

  

  


    



  


    

        Фиксированная высота
    

    

        Оставшееся пространство
    




  

  


    



  

    Фиксированная высота



    Оставшаяся высота



  

  


    



  


    

        Фиксированная высота
    

    

        Оставшееся пространство
    




  

  


    



  

      

        Используется только для растяжения родителя
    
    
 

  / * заменить браузер по умолчанию * /
html,
тело {
  маржа: 0;
  отступ: 0;
}

/ * использовать единицы измерения, относящиеся к области просмотра, чтобы полностью закрыть страницу * /
тело {
  высота: 100вх;
  ширина: 100вв;
}

/ * включить границу и отступ в ширину и высоту элемента * /
* {
  размер коробки: рамка-рамка;
}

/ * полноразмерный контейнер, заполняющий страницу * /
div {
  высота: 100%;
  ширина: 100%;

  / * пример заполнения, размера шрифта, фона и т. д. * /
  отступ: 10 пикселей;
  размер шрифта: 20 пикселей;
  цвет фона: светло-голубой;
}
  

  div {
  высота: 100%;
  ширина: 100%;

  размер шрифта: 20 пикселей;
  цвет фона: светло-голубой;
}
  

  div {
  / * высота: 100% * /
  высота: 865 пикселей; / * текущая высота моего браузера * /
  / *... * /
}
  

  HTML,
тело {
  высота: 100%;
  ширина: 100%;
}

div {
  высота: 100%;
  / *... * /
}
  

  HTML,
тело {
  / * высота: 100%; * /
  / * ширина: 100% * /
}

div {
  / * высота: 100%;
        ширина: 100%; * /
  высота: 100вх;
  ширина: 100вв;
  / *... * /
}
  

  кузов {
  высота: 100вх;
  ширина: 100вв;
}

div {
  высота: 100%;
  ширина: 100%;
  / * высота: 100vh;
  ширина: 100вв; * /
  / * ... * /
}
  

  HTML,
тело {
  маржа: 0;
  отступ: 0;
}

тело {...
  

  div {
  отступ: 10 пикселей;
  / * ... * /
}
  

  * {
  размер коробки: рамка-рамка;
}
  

  

    
 
    

        
 
        
 B2 
    
    
 
    
 

  

  html, body {
    маржа: 0;
    отступ: 0;
    граница: 0;
}
#B, #C, #D {
    позиция: абсолютная;
}
#A {
    верх: 0;
    ширина: 100%;
    высота: 35 пикселей;
    цвет фона: # 99CC00;
}
#B {
    верх: 35 пикселей;
    ширина: 200 пикселей;
    внизу: 35 пикселей;
    цвет фона: # 999999;
    z-индекс: 100;
}
#БИ 2 {
    маржа сверху: -35 пикселей;
    внизу: 0;
    цвет фона: #FFFFFF;
    ширина: 200 пикселей;
    переполнение: прокрутка;
}
# B1 {
    высота: 35 пикселей;
    ширина: 35 пикселей;
    маржа слева: 200 пикселей;
    цвет фона: # CC0066;
}
#C {
    верх: 35 пикселей;
    слева: 200 пикселей;
    справа: 0;
    внизу: 35 пикселей;
    цвет фона: #CCCCCC;
}
#D {
    внизу: 0;
    ширина: 100%;
    высота: 35 пикселей;
    цвет фона: # 3399FF;
}
  

  <тело>
  


  

  #root {
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  высота: 100%;
  ширина: 100%;
}
  

  html, body {
  высота: 100%
}
тело {
  дисплей: гибкий;
  align-items: stretch;
}

#корень {
  ширина: 100%
}
  

  html, body {
    маржа: 0;
    отступ: 0;
    граница: 0;
}
#B, #C, #D {
    позиция: абсолютная;
}
#A {
    верх: 0;
    ширина: 100%;
    высота: 35 пикселей;
    цвет фона: # 99CC00;
}
#B {
    верх: 35 пикселей;
    ширина: 200 пикселей;
    внизу: 35 пикселей;
    цвет фона: # 999999;
    z-индекс: 100;
}
#БИ 2 {
    минимальная высота: 100%;
    высота: 100%;
    маржа сверху: -35 пикселей;
    внизу: 0;
    цвет фона: красный;
    ширина: 200 пикселей;
    переполнение: прокрутка;
}
# B1 {
    высота: 35 пикселей;
    ширина: 35 пикселей;
    маржа слева: 200 пикселей;
    цвет фона: # CC0066;
}
#C {
    верх: 35 пикселей;
    слева: 200 пикселей;
    справа: 0;
    внизу: 35 пикселей;
    цвет фона: #CCCCCC;
}
#D {
    внизу: 0;
    ширина: 100%;
    высота: 35 пикселей;
    цвет фона: # 3399FF;
}
  

  #B {overflow: hidden;}
# B2 {padding-bottom: 9999px; margin-bottom: -9999px}
  

 
 
 
 
 
 
 
 Обычное содержимое 
 
 
 
 
 
 
 Расширенное содержимое 
 
 
 
 
 
 
 

 .