Css — Растянуть блок на всю высоту


Содержание

Высота блока div

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

2. Растянуть div на всю высоту страницы.

Для этого нужно установить высоту 100% для тегов head и body, а затем задать минимальную высоту тегу div. Минимальную, чтобы он мог растягиваться и дальше, если содержимого больше, чем на экран.

html, body <
height: 100%;
margin: 0;
padding: 0;
>

2. Div не растягивается по содержимому

Если внутри тега div будет просто текст или список или какой-нибудь другой тег со свойствами не выводящими его из потока, то все будет хорошо и div растянется как надо. Но если, например, для верстки в 3 столбца, внутри окажутся элементы div с указанным float:left, то содержащий их div перестанет растягиваться по содержимому. Потому что float выводит элементы из потока.

Первое решение заключается в установке родительскому тегу overflow со значением hidden или auto

Второе решение: добавление после плавающих элементов еще одного div со свойством clear:both

Модифицированный второй способ. Вместо дополнительного блока с clear:both, основной блок делают самочищающимся с помощью псевдоселекторов :after и :before

.clear-fix:before, .clear-fix:after <
content: » «;
display: table;
>
.clear-fix:after <
clear: both;
>
/* Для стареньких IE 6 и 7, если кому-то еще вдруг актуально */
.clear-fix <
*zoom: 1;
>

Как сделать div с height 100% с помощью CSS.

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

Сначала решение этой задачи может показаться довольно простой, казалось бы, что нужно задать для блока свойство height со значением 100%.

Но, как видите это свойство не работает. Блок не хочет растягиваться на всю ширину окна браузера.

Как решить эту проблему? Почему не работает свойство height:100%?

Все дело в том, что 100% должны браться от высоты родительского элемента. А какая у нас высота родительского элемента? Для элемента div, в данном примере, этими родительскими элементами являются элементы body и html.

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

Чтобы изменить ситуацию, родительским элементам body и html также нужно добавить свойство height 100%.

Давайте посмотрим, что из этого получиться.

Ну, вот, совсем другое дело. Теперь наш блок растянут на 100% высоты. Используйте это на практике.

Автор:
Дмитрий Ченгаев

Делюсь своим опытом в веб-разработке, чтобы вы реализовали свои идеи и проекты.

Div колонки: 4 способа растянуть div колонки по высоте

Ранее, когда для создания шаблонов использовали табличную верстку, создание колонок с одинаковой высотой было очень легким заданием. Все что нужно было, создать три ячейки в одной строке – все! Но этот метод не приемлем для наших дней, когда мы используем CSS и DIV верстку.

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

Создадим шаблон, в котором все три div колонки будут растянуты по одинаковой высоте.

Способ 1: использование атрибута display:table

В этом методе мы будем использовать список или один div блок, который будет содержать набор колонок. Внешний div блок будет иметь атрибут display:table, все внутренние display:table-cell. По технологии, все колонки растянуться по единой высоте.

Цукерберг рекомендует:  Python - Как на Python записать в файл список процессов и загруз CPU

HTML разметка

CSS стили

Эта техника слишком проста и легка в реализации. Этот способ намного проще, нежели все остальные. Это может сохранить вас от головной боли.

Margin отступ в этом случае будет эквивалентом cellspacing в табличной верстке. Также можно использовать ширину border (только цвет выставить идентично фону), или поиграться с самой шириной колонок.

Этот вариант не работает в IE7 и версиях ниже. Может пройти слишком долго времени, пока IE7 станет новой проблемой IE6 или IE5. Одним словом, не слишком приемлемый способ в плане кроссбраузерности.

Способ 2: использование JavaScript


Этот метод основывается на использовании JavaScript, который автоматически меняет высоту колонок. В этом примере использован jQuery для растягивания div колонок по высоте.

HTML разметка

CSS стили

JavaScript (jQuery)

Вы можете вынести код в отдельный файл и подключить. Или прямо прописать в контексте HTML кода. Только убедитесь, что код будет идти после подключения jQuery библиотеки.

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

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

Если JavaScript не доступен браузеру, колонки не будут растягиваться. Не стоит переживать по этому поводу… попробуйте найти сайт на котором нет JavaScript. Практически у 99,99% пользователей JavaScript доступен в браузере.

Способ 3: искусственные колонки

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

HTML разметка

CSS стили

Это очень просто, не потребует много CSS кода.

Вы не сможете менять ширину колонок. Если нужно будет больше или меньше колонок, придется перерисовывать фоновое изображение и менять CSS код. Одним словом, придется все переделывать!

Способ 4: Использование отдельных div элементов для фона каждой колонки

Этот принцип похож на «Матрешку», где мы будем использовать div элементы для фона каждой из колонок. Каждый div блок будет принимать высоту наибольшего из них. В общем, сейчас сами все увидите.

HTML разметка

CSS код

Выглядит сложно, не так ли? Если вы усвоите этот принцип, тогда поймете что он очень простой. Эта техника основана на следующих 5 ключевых моментах:

    .rightback, .contentback, и .leftback это внешние, обвертывающие div блоки таких элементов, как .lefts > Картинка снизу показывает, как размещены фоновые div элементы .rightback, .contentback и .leftback. Самый нижний — .rightback, самый верхний — .leftback элемент.

Пунктирами обозначена область просмотра контента.

На следующей картинке, черные линии под красной линией – это div элементы контент блоков (leftsidebar, content, rightsidebar), они будут отображаться в случае получения свойства float:left; и соответственной ширины.

Все эти три элемента имеют отступ слева C, используя относительное позиционирование.

C = B + G (смотрите изображение выше).

Этот способ растягивания div колонок по высоте работает во всех браузерах, даже в IE6. Этот метод не потребует JavaScript и достигается с помощью чистого CSS и HTML кода.

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

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

Если знаете еще способы растягивания div колонок по высоте, рад буду узнать! Пишите в комментарии!

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

Задача

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

Решение

Ваш div займет 100% по вертикали только в том случае, если высота родительского блока задана 100%. Так что последовательно прописываем высоту 100% у всех блоков по иерархии, включая body и html.

Пока мы не проставим высоту 100% всем блокам, в который вложен целевой div, ничего не выйдет. Как только пропишем, все встанет как надо.


Резиновый по вертикали сайт

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

100% высота веб-страницы с помощью CSS

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

Цукерберг рекомендует:  Денвер - Проблема с запуском денвер

Допустим, у нас есть такой HTML:

И такой CSS(в файле style.css):

Вы можете открыть этот HTML в браузере, чтоб увидеть, что div не растянулся на всю высоту страницы, хотя мы и указали “height: 100%;” в CSS. Почему спросите вы?

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

, он растягивается, и соответственно растягивает все контейнеры в которых он находится(в нашем случаи и ).

Когда мы добавляем правило “min-height: 100%;” к

указывает ему быть такой же высоты, как он есть.

Таким образом, для того, чтоб добиться желаемого результата, необходимо увеличить высоту контейнера . Тут мы сталкиваемся с той же проблемой в контейнере – его высота равна высоте ! Таким образом, для того, чтобы исправить проблему (то есть заставить контейнер

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

То есть, поменять CSS на следующий:

В результате получим, что содержимое займет всю высоту страницы. Важный факт, если содержимое имеет высоту большую, чем высота страницы, то появится полоса прокрутки. Для этого вместо height: 100%; в последней строчке использовано min-height: 100%;. В противном случаи, содержимое обрывалось бы в конце страницы.

HTML & CSS: как не надо

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

Не задавайте текстовым блокам фиксированную высоту #

При увеличении количества текста он вывалится наружу и может наложиться на нижележащие элементы.

Как это увидеть? #

Можно отредактировать исходный HTML, а можно выполнить в консоли браузера такую команду:

После этого вы сможете отредактировать любой текст на странице.

При фиксированной высоте текст не может растянуть блок и вываливается. А как надо? #

Решение зависит от того, что нужно сделать. Если у блока по макету есть минимальная высота, но контента недостаточно, чтобы его растянуть, используйте min-height :

min-height позволит добиться соответствия макету, а при добавлении контента блок просто вырастет вниз.

Ещё это может быть полезно как временное решение, чтобы разложить блоки по макету, до того, как будет стилизовано содержимое, после этого min-height убирается.

Если же контента достаточно, min-height не нужен, достаточно задать стили для текста и padding для блока, и его размеры будут определяться содержимым.

Если у блока есть явные границы, padding нужно задавать со всех сторон, чтобы при добавлении текста он не упёрся в края:

Заказать Подопытная кнопка с минимальной шириной и высотой

Заказать слона Не хватает паддингов слева и справа Заказать слона Не хватает вертикальных паддингов Заказать слона Все паддинги на месте, добавление текста ничего не ломает

Не используйте absolute для позиционирования текстовых блоков #

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

Как это увидеть? #

Как и в предыдущем случае, можно отредактировать исходный HTML или использовать команду в консоли:


После чего добавить текст в интересующий элемент.

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

В этом случае лучше перенести position:absolute на картинку и добавить min-height , чтобы блок не схлопывался по высоте текста (иначе может вывалиться картинка):

Как растянуть блок div по высоте окна браузера?

Современные браузеры позволяют посредством CSS3 растянуть блок по всей высоте видимой области. Однако с браузерами предшественниками, не поддерживающие стандарт CSS3 всё гораздо иначе. Есть случаи, при которых можно обойтись без CSS3 в старых браузерах и растянуть блок по высоте, не прибегая к JavaScript. Если блок расположен непосредственно после тега body, то достаточно задать высоту для тега html, body, а так же самого div, величиной 100%.

В современных браузерах есть поддержка CSS3, а это значит, что есть возможность использования обозначения единицы измерения vh, которая укажет браузеру, что нужно задать значение в процентах от размера самого окна браузера. И в этом случае следующая запись могла вполне может быть уместной для того чтобы растянуть блок div по высоте:

Цукерберг рекомендует:  1 апреля. Улыбнитесь!

Второй вариант более практичный, так как поддерживается большинством браузеров, вне зависимости от того есть ли у браузера поддержка CSS3 или нет. Здесь будет задействован javascript наряду с jquery. Используя $(window).height мы можем получить высоту окна браузера, после чего нам достаточно задать эту высоту для блока, чтобы растянуть div по высоте окна браузера.

Второй способ позволяет растянуть блок div по высоте практически во всех браузерах, где есть поддержка JavaScript. CSS3 в скором времени будет использоваться повсеместно. Однако есть процент пользователей, использующих браузеры без поддержки этого стандарта. Использовать какой либо из примеров или нет — решение за вами, на этом пока всё, спасибо за внимание.

Css — Растянуть блок на всю высоту

Верстаю шаблон div’ами. Вроде всё нормально, но вот столкнулся с проблемой.
Вот схематический рисунок шаблона:

Центральный блок в зависимости от контента растягивается на всю ширину страницы. А вот левый и правый блок имеют в себе меньший объём информации и обрезаются там, где кончаются блоки. Соответственно центральный блок имеет продолжение, а боковые обрываются.
Как исправить?

Пробовал различными heigh. Последний вариант:

#back_bottom_left <
width:224px;
background-image:url(../images/rgkz_06.jpg);
background-repeat:repeat-y;
float:left;
height: expression((document.body.clientHeight + eval(document.body.scrollTop)) + «px»);
>

#back_bottom_center <
width:543px;
background-image:url(../images/rgkz_07.png);
background-repeat:repeat-y;
float:left;>

Растянуть background на всю ширину с помощью CSS

Здесь как можно подробнее разберем. как можно реализовать фон (background) интернет ресурса, что должен покрывать все рабочее пространство. Основном все делается на CSS3, также можно подключить jQuery и даже PHP, но рассмотрим один вариант, который на чистом CSS. Для начало нужно понять или определить, что должно получится. Это безусловно, полноценная заливка окна фоном или изображением, чтоб не было не каких пробелов.

Где будем растягивать картинку, так чтоб она смотрелось корректно, так как если идет фон под одним оттенком цвета, с ним легче работать. Не забываем про соответствие картинка на ее пропорций. И обязательно должно получится, что изображение установилось по центру. Что главное, все должно быть максимально кроссбраузерно и понятное дело, без различных махинаций с flash.

Метод CSS3 background

Это метод самый распространенный, что может растянуть background на чистом CSS, и все благодаря одному свойству, под названием background-size, что только будет присутствовать в CSS3.

Здесь изначально создадим background фиксированным и выставим его по центру, что останется его только растянуть, где подключаем свойства background-size, это все идет под ссылку на фон.

В общим ориентируемся с блоком которому присваиваем стили и дописываем в файле стилей этому блоку, следующий код:

Как можно заметить, что параметр background, где изначально добавляем путь на картину, где происходит установка положение изображение в соответствие окна экрана. Если разбирать, то значение center и top отвечает за центр и прижатие по всем сторонам, чтоб не было пробелов. Чтоб понятно было, то значение fixed — отвечает за функцию фиксаций.

Метод совсем обычный, что применяю постоянно и он меня устраивает на все 100% процентов.

Еще один способ :

Еще один обычный метод воплотить наверное, вставить картину на страницу. Она станет обладать фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min-width и min-height 100%. Еще необходимо заблаговременно приготовить картину, в намерении пропорциональности сторон.

Здесь как можно заметить, что этот код не центрирует background image, что можно быстро все сделать как нужно, а точнее фиксировать изображение с помощью взятия ее в div.

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

Также небольшое видео, где все понятно объясняют по как при помощи CSS растянуть фон на весь экран.

VESNIN’s
блог

panel

Как растянуть DIV на 100% или задать высоту DIV (height) в процентах (%)

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

Чтобы растянуть элемент DIV на 100% по вертикали для начала прописать для html, body . А затем последовательно задать высоту всем родителям данного блока. Обязательно! (Если не обозначить в % высоту всех блоков, в которые вложен требуемый блок, то его высота в процентах будет игнорироваться. )

Читатель любезно предоставил конструкцию для примера:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих