Css растянуть блок на всю высоту: html — Как растянуть блок на всю высоту страницы? — Программирование на Python и Objective-C в Mac OS

Содержание

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% работает ТАК:

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

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

Как растянуть блок на всю высоту экрана с помощью CSS

» Как растянуть блок на всю высоту экрана с помощью CSS

В сегодняшней статье я расскажу, как растянуть блок на всю высоту экрана с помощью CSS.
Вам понравится способ, так как он легкий, без множества строк в коде. А самое главное – он эффективный.
Пожалуй, начну из проблемной ситуации, с которой не так легко выйти. Финальное решение задачи, естественно, я предоставлю.

Итак, о проблеме.
Если вы верстальщик, я уверен, что вы сталкивались с такой ситуацией, когда нужно было растянуть блок на всю высоту экрана.
Итак, самый простой способ.

Пример в HTML:


<div>
<h4>BLOGGOOD.RU</h4>
</div>

в CSS:


#hei
{
height: 100vh;
background:#ccc;
}

Благодаря единице измерений «vh» со значением «100», блок примет высоту на вес экран.

vh – это единица измерений, которую можно расшифровать, как viewport height, высота области просмотра.
1vh равен одному проценту от высоты области просмотра.
Между прочим, есть еще и единица измерений «vw».
vw — это единица измерений, которую можно расшифровать, как viewport width, ширина области просмотра.

Если вам по каким-то причинам не нравится верхний код, можете воспользоваться вот таким:


#hei {
height: 100%;
width:100%;
position: absolute;
background:#ccc;
}

Если и это вам не подошло, тогда вы сможете воспользоваться JS.
Всем пока!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

расширьте высоту div на всю веб-страницу

Есть ли способ расширить высоту div на всю веб-страницу с помощью css?

Я не использую

.height
 {
  height:100%;
  }

Но это будет распространяться только на высоту содержимого внутри div. Div должен охватывать всю веб-страницу, даже если внутри нее находится всего 1 строка контента.

css

Поделиться

Источник

user544079

14 апреля 2011 в 23:54

5 ответов

Наложение изображения на всю веб-страницу
Можно ли наложить повторяющееся изображение на всю веб-страницу? Если да, то как?
Создание столбцов на всю высоту страницы
Мне чертовски трудно сделать три столбца (не верхний или нижний колонтитул, а все, что содержится в div с классами colmask и threecol. Какие-нибудь намеки? Веб-сайт http://pacecarz.com / Я сделал тело и теги html имеют высоту 100%. Я попытался сделать #wrapper div высотой 100% и colmask div…

Убедитесь, что все родительские элементы имеют заданную высоту.
html / тело / и т.д.

Элемент будет принимать 100% высоты своих родителей, но только в том случае, если родитель делает HAVE высоты.

100% заданной высоты приведет к другой заданной высоте 😉

Поделиться

Edwin

15 апреля 2011 в 11:52

Используйте свойство min-height.

.height {
   min-height: 100%;
}

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

Поделиться

alex

14 апреля 2011 в 23:56

<div><!-- make a <div> to hold everything in.. -->

<div>blah blah blah</div>

<div>blah blah blah</div>

</div>

Поделиться

Unknown

14 апреля 2011 в 23:57

Это сработало для меня:

<html>
    <head>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }

            #wholepage {
                height: 100%;
                width: 100%;
                background: red;
                color: white;
                font-weight: 800;
                font-size: 22px;
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <div>
            Simple Test
        </div>
    </body>
</html>

Поделиться

ohmusama

15 апреля 2011 в 00:03

Возможно, вам придется указать высоту для элементов <html> и <body> :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>extend div height to entire webpage</title>
    <style type="text/css">
        html, body {
            height:100%;
        }
        #tehDiv {
            height:100%;
            background:red;
        }
    </style>
</head>
<body>
    <div>Example</div>
</body>
</html>

Поделиться

Richard JP Le Guen

15 апреля 2011 в 00:08

Как сделать мой на всю высоту страницы?

Я только что сделал div высоты 100% на этой странице, но (по крайней мере, в Chrome и Chromium) есть небольшие верхние и Нижние поля. Я хочу, чтобы div покрывал их, но я не хочу прибегать к использованию на заданной высоте, так как я буду использовать одну и ту же настройку на нескольких страницах.

css

html

height

Поделиться

Источник

Jules

11 февраля 2012 в 19:32

2 ответа

Создание столбцов на всю высоту страницы
Мне чертовски трудно сделать три столбца (не верхний или нижний колонтитул, а все, что содержится в div с классами colmask и threecol. Какие-нибудь намеки? Веб-сайт http://pacecarz.com / Я сделал тело и теги html имеют высоту 100%. Я попытался сделать #wrapper div высотой 100% и colmask div…
расширьте высоту div на всю веб-страницу
Есть ли способ расширить высоту div на всю веб-страницу с помощью css? Я не использую .height { height:100%; } Но это будет распространяться только на высоту содержимого внутри div. Div должен охватывать всю веб-страницу, даже если внутри нее находится всего 1 строка контента.

Все ли ваши элементы html, body и div имеют border:0 и margin:0?

Поделиться

Joe

11 февраля 2012 в 19:39

Установите границы, поля и отступы равными 0.

Поделиться

elrado

11 февраля 2012 в 19:46

Как растянуть блок на весь экран CSS

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

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

Берем DIV или можно section, и присваиваем ему высоту, использовав единицу измерения vh – это относительно 1% высоты окна просмотра. Пример:

<!DOCTYPE html>
<html>
<head>
    <title>Блок на всю высоту страницы</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
        <style>
        *{
        padding:0;
        margin:0;
        }
        
        section {
        height: 100vh;
        width: 100%;
        background:#E11328;
        }
        </style>

    <section>
    </section>        
        </body>
</html>

Посмотреть

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

<!DOCTYPE html>
<html>
<head>
    <title>Блок на всю высоту страницы</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
        <style>
        *{
        padding:0;
        margin:0;
        }
        
        .divleft {
          height: 100vh;
          width: 50%;
          background: #E1DD5B;
          float: left;
        }

        .divright {
          height: 100vh;
          width: 50%;
          background: #E13345;
          float: right;
        }
        </style>

        <div></div>
        <div></div>        
        </body>
</html>

Посмотреть

Есть также и другие варианты реализации. Это может быть flex, JavaScript и другое. Но этот рабочий и кроссбраузерный. Ну, если, конечно, браузер не очень старый. В Internet Explorer 8 этот способ не работает, а начиная с 9 все отлично.

Как растянуть блок на всю высоту. Прижимаем футер к низу страницы

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

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

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

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

Прижимаем футер к низу страницы.

Исходно имеем некую html страницу представленную кодом:

основной текст сайта

контейнер body имеет серый цвет, внутри него лежит обертка (#wrapper) шириной 200 пикселов, равнение по центру. Внутри обертки последовательно сверху вниз расположены три блока: #header — шапка, розового цвета; #content — содержательная часть сайта с фоном белого цвета; #footer — подвал черного цвета. Высота шапки и подвала принята 50 пикселов. Высота контентной части варьируется по содержимому. Визуально это выглядит следующим образом.

Для начала нужно вынести блок футера за пределы обертки (#wrapper). Затем для контейнеров html, body, #wrapper установить высоту 100% (height: 100%). После этого появится полоса прокрутки, а футер будет расположен ниже видимой части окна браузера.

Чтобы уйти от этого недоразумения, установим для футера отрицательный межблочный отступ по вертикали равный высоте футера (margin:-50px auto; — смещаем вверх на 50 пикс. и выравниваем по центру). Теперь у нас футер наползает на блок обертки и на блок контента в случае если высота соответствует. Сделаем для блока контента внутриблочный отступ снизу 50px, теперь все выглядит красиво.

Пока этот вариант работает в «правильных» браузерах (я проверял в opera, firefox, google chrome и IE 8). В недобраузере ИЕ 6 не проверял работоспособность, в ИЕ 7 по идее должно работать.

основной текст сайта

Как растянуть блок div по высоте родительского блока

Собственно мы уже это сделали, блок #wrapper растянут по высоте на 100% контейнера body. Проблема заключается немного в другом, на рисунке ниже видно, что белый фон контента не дотягивается до футера, а между контентом и футером появился серый фон. Чтобы этого избежать можно задать для обертки такой же цвет как и для блока контента (#wrapper{ background:#fff;}).

UPD: 3.04.2014

Образовался некий, якобы пробел в подаче информации. Попытаюсь заполнить. Суть в том, что в комментах есть замечания на тему что контент не растянут как обещалось. Во-первых в статье нет речи о том, что нужно ратягивать блок контента. Во-вторых в статье блок wrapper растянут на высоту блока body, о чем сказанно в заголовке (как растянуть блок по высоте), что и требовалось доказать. Решать некую универсальную задачу я перед собой не ставил, это в принципе не возможно.

Но чтобы показать вам, что все проблемы решаются покажу как «растянуть» еще и блок контента. Сразу оговорюсь, напрямую в блочной модели невозможно без javaScript расятнуть один блок до другого блока, сделать это можно только на 100% высоту. Без яваскрипта вопрос решается таблицей. Делаете 3 ячейки по вертикали (шапка, контент, подвал). Если ограничить высоту шапки и подвала, а высоту таблицы сделать 100%, то в итоге контентная часть будет просчитываться браузером автоматически.

Я же покажу как закрасить фон блока контента в белый цвет не трогая блок wrapper. Все очень просто, создаем еще один блок вложенный в блок wrapper, назовем его, например wrapper2. Укажем ему высоту 100% и белый фон. Что итребовалось доказать

основной текст сайта

До новых встреч. На закуску как всегда сочное видео на тему экстрим-сплава. Рафтинг на реке Замбези, порог с говорящим названием — «унитаз дьявола».

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

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

. Пример: .
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div {
width: 100vw;
height: 100vh;
}
начальной 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 ]

С width проще, поскольку width блочного элемента равно width его родителя. У body только нужно обнулить margin и padding .

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

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

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

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

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

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

Я всегда сталкиваюсь с затруднениями, когда необходимо растянуть блок на 100% высоты страницы
. Например, у меня есть блок div , который необходимо растянуть, однако все немного сложнее, чем кажется. Итак, почему бы не найти кроссбраузерное решение по растягиванию блока на всю высоту страницы?
Сегодня мы попытаемся найти это решение.

Скажем, у вас есть html-файл наподобие такого:

CSS 100% Height

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod …..
короче много контента

К нему прилагается CSS:

Body {
margin: 0;
padding: 0;
}
#content {
background: #EEE;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
height: 100%;
}

Что это нам дает, вы можете увидеть перейдя по:

Как вы можете видеть, высота страницы определяется контентом и не растягивается на 100%, несмотря на то, что мы добавили блоку #content свойство height со значением 100% . Как так? Давайте немного поразмышляем об HTML. HTML – это всего лишь куча контейнеров вложенных один в другой. Итак, у нашей страницы сперва идет контейнер html , затем внутри контейнера html лежит контейнер body , ну и, наконец, в body расположен блок с идентификатором content . Когда мы помещаем контент в один из этих блоков, он растягивает этот блок и все другие блоки, содержащие этот блок. Итак, мы растягиваем блок

, когда помещаем в него текст, этим, в свою очередь, мы растягиваем другие блоки (в нашем случае это блоки body и html).

Добавляя блоку

объявление height: 100% , мы говорим: блок div id=«content» нужно растянуть на всю высоту блока-родителя. В нашем примере, как вы понимаете, этим блоком-родителем является тег body . Итак, высота блока div id=«content» равна полной высоте (100%) тега body . Хорошо, но какая высота у тега body ? Все просто: высота тега body равна высоте блока , которую мы нигде не задавали! Поэтому, когда мы создаем объявление height: 100% , мы просто говорим: блок по высоте должен быть равен самому себе!

Чтобы исправить это, нам нужно назначить тегу body свою высоту. Но мы снова столкнемся с той же проблемой, ведь тег body лежит в теге html . Таким образом, чтобы растянуть блок

на всю высоту окна браузера, нам необходимо тегам body и html задать высоту, которая соответствовала бы полной высоте страницы.

Html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#content {
background: #EEE;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
min-height: 100%;
}
/* специально для IE */
* html #content {
height: 100%;
}

И на этом все. Посмотрите demo. Блок с контентом растягивается на всю высоту окна браузера
.

Обратите внимание на объявление min-height:100%; : благодаря нему в случае, если контент выходит за пределы окна браузера, фон также будет растягиваться за контентом.

Не забываем и о старых браузерах IE, которые не понимают свойство min-heigt , для них необходимо добавить * html #content {height: 100%;} .

Использованы материалы

Блок на весь экран | CSS — Примеры

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

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

position: fixed;. Пример: онлайн линейка.
div { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

единиц vw и vh
div { width: 100vw; height: 100vh; }

начальной 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]
<html> <head> <style> html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } body { overflow: auto; } main { min-height: 100%; } </style> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> <html>

С width проще, поскольку width блочного элемента равно width его родителя. У body только нужно обнулить margin и padding.

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

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

<html>
  <head>
    <style>
      header, nav, main, footer {
        max-width: 1200px;
        margin: 0px auto;
      }
    </style>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
  </body>
<html>

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

<html>
  <head>
    <style>
      header, nav, main, footer {
        max-width: 1200px;
        margin: 0px auto;
      }
      @media (min-width: 1200px) { 
        .full-screen {
          width: 50vw;
          margin-left: 50%;
        }
        .full-screen > div {
          width: 100vw; 
          margin-left: -100%;
        }
      }
    </style>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main>
      <article>
        <div>
          <div>  </div>
        </div>
      </article>
    </main>
    <footer></footer>
  </body>
<html>

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

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

<html>
  <head>
    <style>
      header, nav, main, footer {
        max-width: 1200px;
        margin: 0px auto;
      }
      @media (min-width: 1200px) {
        .full-screen {
          width: 50vw;
          margin-left: 50%;
        }
        .full-screen > div {
          width: 100vw;
          margin-left: -100%;
        }
        .full-screen img {
          display: block;
          max-width: 100%;
          height: auto;
          margin: 0 auto;
        }
      }
    </style>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main>
      <article>
        <div>
          <div> <img src="адрес" alt="текст" /> </div>
        </div>
      </article>
    </main>
    <footer></footer>
  </body>
<html>

И не нужны никакие лайтбокс для фото.

Другое решение: https://css-tricks.com/full-width-containers-limited-width-parents/

html — Как растянуть div на всю высоту с помощью flex

html — Как растянуть div на всю высоту с помощью flex — qaru

Спросил
3 года, 7 мес. Назад

Просмотрено
418 раз

Как растянуть блоки div с желтым фоном на всю высоту? Он должен закрывать зеленый цвет, но он не работает.Я пробовал добавить на него высоту : 100% , но затем складывается высота из строки поиска?

https://jsfiddle.net/nuy20j1h/

  .block {
  ширина: 80%;
  маржа: 0 авто;
  дисплей: гибкий;
  flex-wrap: обертка;
}
.sidebar {
  высота: 600 пикселей;
  ширина: 25%;
  фон: красный;
}

.дом {
  дисплей: гибкий;
  flex-wrap: обертка;
  выровнять элементы: гибкий старт;
  ширина: 75%;
  фон: зеленый;
}

.панель поиска {
  ширина: 100%;
  отступ: 25 пикселей;
  фон: синий;
}

.content-wrap {
  дисплей: гибкий;
  flex-wrap: обертка;
  ширина: 100%;
  выровнять элементы: гибкость-растяжка;
}

.содержание,
.Один {
  ширина: 50%;
  фон: желтый;
}

  
   боковая панель 
  
     панель поиска 
    
       lorem ipsum 
       тест

Сын

79.8k1111 золотых знаков8282 серебряных знака130130 бронзовых знаков

Создан 30 янв.

два

77244 золотых знака1212 серебряных знаков2626 бронзовых знаков

Сначала вы должны добавить сброс стиля, сейчас я использую это * {} , как вы можете видеть ниже.Уловка здесь заключается в том, чтобы запустить flex-direction: column; на .home , и вы можете указать .content-wrap занять оставшееся пространство после поиска с помощью flex-grow: 1;

размер коробки: бордюр-бокс; есть, если вы добавите, скажем, width: 200px; к элементу и добавьте padding: 20px; , элемент останется на 200 пикселей с включенным отступом. Если у вас его нет, он займет 200 + 40 пикселей.

, если вам нужна скрипка, вот она

  * {
  отступ: 0;
  маржа: 0;
  размер коробки: рамка-рамка;
}

.блокировать {
  ширина: 80%;
  маржа: 0 авто;
  дисплей: гибкий;
  flex-wrap: обертка;
}
.sidebar {
  высота: 600 пикселей;
  ширина: 25%;
  фон: красный;
}

.дом {
  дисплей: гибкий;
  flex-direction: столбец;
  flex-wrap: обертка;
  выровнять элементы: гибкий старт;
  ширина: 75%;
  фон: зеленый;
}

.панель поиска {
  ширина: 100%;
  отступ: 25 пикселей;
  фон: синий;
}

.content-wrap {
  дисплей: гибкий;
  flex-grow: 1;
  flex-wrap: обертка;
  ширина: 100%;
  выровнять элементы: гибкость-растяжка;
}

.содержание,
.Один {
  ширина: 50%;
  фон: желтый;
}

  
   боковая панель 
  
     панель поиска 
    
       lorem ipsum 
       тест

Создан 30 янв.

Деян.SDejan.S

16.6k2121 золотой знак6666 серебряных знаков106106 бронзовых знаков

flex-direction: столбец; — ваш друг. Вот переработанная скрипка вашего кода: https://jsfiddle.net/vsjktmms/1/

Используя ту же структуру HTML, которую вы предоставили:

 .блокировать {
  дисплей: гибкий;
  ширина: 80%;
  маржа: 0 авто;
  цвет фона: серый;
  align-items: stretch;
}

.sidebar {
  ширина: 25%;
  высота: 600 пикселей;
  цвет фона: красный;
}

.дом {
  дисплей: гибкий;
  flex-direction: столбец;
  align-items: stretch;
  ширина: 75%;
  цвет фона: зеленый;
}

.панель поиска {
  отступ: 25 пикселей;
  цвет фона: синий;
}

.content-wrap {
  гибкость: 1 1 авто;
  дисплей: гибкий;
  flex-wrap: обертка;
  ширина: 100%;
  цвет фона: розовый;
}

.содержание,
.Один {
  ширина: 50%;
  фон: желтый;
}

Создан 30 янв.

Крискиркнильсен

2,63022 золотых знака1010 серебряных знаков2121 бронзовый знак

Как упоминалось в других ответах, здесь есть одна основная проблема:

flex-direction: столбец; , который я добавил к home , чтобы разрешить использование свойств гибкости вместо height , чтобы сделать .content-wrap заполнить доступное пространство, оставшееся в доме

Это сделает стек .search-bar и .content-wrap вертикальным и позволит использовать flex: 1 на .content-wrap , что позволит заполнить оставшееся пространство / высоту .

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

См. Мои примечания, сделанные в CSS, для дальнейших разъяснений и того, что я изменил.

Фрагмент стека

  .block {
  ширина: 80%;
  маржа: 0 авто;
  дисплей: гибкий;
  flex-wrap: обертка;
}

.sidebar {
  высота: 600 пикселей;
  ширина: 25%;
  фон: красный;
}

.дом {
  дисплей: гибкий;
  flex-direction: столбец; /*  добавлен  */
  / * flex-wrap: wrap; удалено, не нужно * /
  / * align-items: flex-start; удалены, элементы должны заполнять родительские,
                                    в этом измененном случае ширина * /
  ширина: 75%;
  фон: зеленый;
}

.панель поиска {
  / * ширина: 100%; не требуется, по умолчанию для столбца
                                    элемент должен заполнить родительскую ширину как
                                    его "align-items" равно "stretch" * /
  отступ: 25 пикселей;
  фон: синий;
}

.content-wrap {
  гибкость: 1; / * добавлено, забираем оставшееся место слева
                                    слева от своего родителя (в данном случае высота) * /
  дисплей: гибкий;
  flex-wrap: обертка;
  / * ширина: 100%; не требуется, по умолчанию для столбца
                                    элемент должен заполнить родительскую ширину как
                                    его "align-items" равно "stretch" * /

  / * align-items: flex-stretch; неправильное значение, должно быть "растягивать",
                                    хотя, поскольку это значение по умолчанию,
                                    это не нужно * /
}

.содержание,
.Один {
  ширина: 50%;
  фон: желтый;
}

  
   боковая панель 
  
     панель поиска 
    
       lorem ipsum 
       тест

Создан 30 янв.

Асон

79.8k1111 золотых знаков8282 серебряных знака130130 бронзовых знаков

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html css flexbox или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

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

Принимать все файлы cookie

Настроить параметры

CSS Сделайте полноэкранный формат Div

58 796

Есть несколько способов заставить div занимать весь экран по горизонтали и вертикали.

У меня есть простой элемент div с полем имени класса.

Затем удалите все поля или отступы по умолчанию из тегов html и body.

  html, body {
  маржа: 0px;
}

высота: 100%

Перед тем, как установить для свойства height значение 100% внутри класса .box, обязательно добавьте его в теги HTML и body, иначе это не сработает.

Это связано с тем, что когда вы устанавливаете высоту 100% для элемента, он будет пытаться растянуться до высоты своего родительского элемента.

  html, body {
  маржа: 0px;
  высота: 100%;
}

.коробка {
  фон: красный;
  высота: 100%;
}

✅ Рекомендуется:
CSS Сделать фоновое изображение на весь экран

высота: 100vh

Класс .box имеет только 100vh, что составляет 100% высоты области просмотра.

Когда вы устанавливаете высоту на 100vh, элемент коробки будет растягивать свою высоту до полной высоты окна просмотра независимо от его родительской высоты.

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

  .box {
  фон: красный;
  высота: 100vh;
}

✅ Рекомендуется :
CSS Center A Div по горизонтали и вертикали

позиция: абсолютная

Вы также можете использовать абсолютное положение, а также установить для всех сторон окна просмотра (верх, правый, нижний, левый) значение 0 пикселей, чтобы div занимал весь экран.

  .box {
  фон: красный;
  позиция: абсолютная;
  верх: 0px;
  вправо: 0 пикселей;
  внизу: 0px;
  слева: 0px;
}

Вы также можете установить высоту и ширину на 100% вместо установки 0 сверху, справа, снизу и слева.

Один из сценариев, которые я могу придумать для использования свойства position: absolute для создания полноэкранного div, — это когда вы хотите иметь фоновый полноэкранный div для браузера и какой-либо другой div на переднем плане.

✅ Рекомендуется
Дизайн классной регистрационной формы с использованием HTML и CSS

ящиков, которые заполняются по высоте (или более) (и не сжимаются)

Трудно описать все достоинства flexbox в одном небольшом сообщении в блоге.Хотя здесь мы попробовали. Здесь давайте просто попробуем сосредоточиться на одной вещи, которую Flexbox решает очень хорошо: возможность иметь произвольный набор блоков, заполняющих всю доступную высоту родительского блока. И не только это, но и при необходимости расширяйте их (не сжимайте их до нужного размера).

Под «коробкой» я подразумеваю элемент блочного уровня. Див, раздел, статья, что угодно.

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

Не можем ли мы заставить коробки равномерно разделить пространство между этим пространством? Мы можем это сделать с помощью flexbox.

Слева: по умолчанию; Справа: что мы хотим сделать

Скажем, HTML выглядит так:

  <раздел>