Высота контейнера css – Как задать блоку который находится в контейнере ширину на весь экран? — Хабр Q&A

CSS: Высота контейнера с плавающими дочерними элеметами

Общая проблема дизайнов с плавающими элементами это то, что такие элементы, расположеные внутри контейнера, не приводят к увеличению его размера, для того, чтоб он их уместил внутри. Все дочерние плавающие элементы остаются расположены вне пределов его границ. Если нам к примеру нужно обвести границу вокруг всех плавающих элементов, просто указать CSS параметр border: 1px solid black не получится - граница останется сверху.

Проблема

Рассмотрим следующий пример.

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

Это код, который мы будем использовать в данной статье:

div.container {
    border: 1px solid #000000;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}
<div class=container"">
  <div>left</div>
  <div>right</div>
</div>

Старое решение

Старое решение требовало добавления в контейнер дополнительного элемента, имеющего со стиль clear: both. Как только внутри контейнера появилсся не плавающий элемент, сам контейнер увеличит свой размер, для того чтоб его вместить:

.clear {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    width: 100%;
}

<div></div>

Это можно сделать двумя способами: добавить дополнительный код в HTML исходник (например как в редыдущем примере), или используя для генерации псевдокласс :after. Так как Интернет Эксплорер (Win и Mac) не поддерживает псевдокласс :after, второй способ представляет из себя только практический интерес.

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

Новое решение

div.container {
    border: 1px solid #000000;
    overflow: auto;
    width: 100%
}

Параметр width необходим для того, чтоб установить свойство "hasLayout" в браузере Internet Explorer для Windows (за исключением 7).

Теперь граница аккуратно расположилась вокруг плавающх элементов.

Несколько моментов, на которые следует обратить внимание:

  1. Метод работает с тремя из четырех значений overflow: auto, hidden и scroll. Конечно, использование последнего значения приведет к отображению полос прокрутки, не зависимо от того нужны они или нет.
  2. Некоторым браузерам для корректного отображения нужно указать параметр width или height для контейнера div.
  3. Браузер может показывать полосы прокрутки, если содержимое выходит за рамки контейнера.
Необходимость параметров width или height

Для того, чтоб метод работал в Windows версиях Эксплорера и Opera, нужно указать параметр width или height. Если его не использовать - Эксплорер продолжит показываьть границу вверху колонок, словно свойство overflow не было указано. Opera полностью спрячет содержимое контейнера.

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

Explorer Mac:
hidden

Если Explorer для Mac важен при разработке дизайна, следует использовать параметр overflow: hidden. Этот браузер при использовании overflow: auto; всегда отображает полосы прокрутки.

Нежелательные полосы прокрутки

Как Обратил внимание Dave Shea, это решение может привести к появлению нежелательных полос прокрутки, если содержимое контейнера выйдет за его пределы. Лично я удивляюсь этой проблеме. Свойство overflow: hidden гарантирует, что полосы прокрутки ни в какосм случае не появятся. Конечно, может случиться так, что часть контента окажется невидимой, но если мы удостоверимся:

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

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

Конечный код

Для завершенности статьи, вот результирующий код, который нам нужен:

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

Перевод мой. Оригинал находится здесь.

 

Высота контейнера CSS ноль ... почему не высота содержимого?

Очень простой:

Вам нужно очистить floatвнутри .lineitem.

Добавьте это к вашему css, это очистит поплавки с pseudoэлементом без необходимости изменять ваш HTML.

#checkoutform .lineitem:after {
  display: table;
  clear: both;
  content: "";
}

Демо: https://jsfiddle.net/jrkph2ra/

Причина этого работает:

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

Элемент, который следует за плавающими элементами, clear:both;будет означать, что ни плавающие элементы не разрешены слева или справа от этого элемента, он перемещает край поля элемента ниже края поля всех соответствующих значений, заставляя браузер принимать учтите высоту плавающих элементов в расчете высоты.

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

«Очистка поплавков» является обычной практикой и хорошо проверена.

Если вы используете его часто, вы можете создать класс как clearfixи добавить этот класс для всех соответствующих элементов.

.clearfix:after {
  display: table;
  clear: both;
  content: "";
}

Затем добавьте .clearfixвсе соответствующие элементы с плавающими дочерними элементами.

Демо https://jsfiddle.net/jrkph2ra/1/

display: table; против display:block;

Оба , display: table;и display:block;будет генерировать элементы уровня блока, главное отличие состоит в том , что tableбудет расширяться только на ширину его содержания, в этом случае шириной , 0но block

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

Автор: Arbel Размещён: 27.03.2016 07:32

Высота контейнера HTML/CSS (html, css, layout, height)

1 box [2013-07-23 14:37:00]

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

    <div>
    <section>
        <h2>title here</h2>
            <img src="images/jayzmchg.jpg"></img>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
            Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur 
            a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et, 
            cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac 
            ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis 
            venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet 
            ligula scelerisque hendrerit.</p>
    </section>

    <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

<footer>
        <p></p>
</footer>

Выше html, следующий css

#container { /* purple border */
height: 250px;
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
    }

#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
    }

#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
    }

ive задает высоту 250px для контейнера, чтобы вы могли ее видеть, ive попытался установить его как 100%, но просто не показывает ничего, что догадывается, что это не значит, что в нем нет контента, но как я могу сделать так, чтобы он действовал, как если бы внутри mainContent - его высота.

добавление переполнения: скрытый в контейнер вызывает это

html css layout height

НОУ ИНТУИТ | Лекция | CSS3. Работа с контейнерами

Аннотация: Понятие контейнерного дизайна. Контейнеры. Работа со стилями контейнеров.

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

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

Понятие контейнерного дизайна

Если подойти методологически к вопросу о дизайне веб - страниц, то можно выделить следующие группы (школы) дизайна:

  • текстовый;
  • фреймовый;
  • табличный;
  • контейнерный.

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

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

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

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

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

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

Как и текстовый дизайн, фреймовый в настоящее время практически не применяется.

Идея табличной верстки сайтов лежит на поверхности. На веб - странице размещается html - таблица, в ячейки которой и помещается контент. Соответственно, визуально веб - страницу можно разделить на необходимое количество блоков ("шапка" сайта, панель навигации и т.д.).

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

Контейнерный подход при верстке и дизайне сайтов заключается в использование элементов - контейнеров для размещения контента. Контейнеры (парный тег <div>) являются блочными элементами, к каждому контейнеру может быть применен индивидуальный стиль.

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

Рассмотрим подробнее приемы работы с контейнерами.

Контейнеры

Отметим, что <div> не является единственным элементом - контейнером. Но поскольку, в контексте данной лекции, мы говорим именно о контейнерном дизайне, то и рассматривать будем только его базовый элемент – тег <div>. С другими элементами контейнера предлагается ознакомиться самостоятельно.

Парный тег <div> используется для группировки элементов веб - страницы, как правило с целью управления внешним видом содержимого, при помощи CSS стилей.

Работа со стилями контейнеров

Для контейнеров применим тот же набор атрибутов стилей, что и для других элементов веб - страницы. Рассмотрим ключевые, с точки зрения дизайна, атрибуты стиля при работе с <div> контейнерами.

Управление размерами контейнеров

<div> – контейнер представляет собой прямоугольную область. Значения высоты и ширины данной области определяются такими стандартными атрибутами стилей, как:

  • высота
    • min-height – задает минимальную высоту элемента;
    • height – задает высоту элемента;
    • max-height – задает максимально возможную высоту элемента;
  • ширина
    • min-width – задает минимальную ширину элемента;
    • width – задает ширину элемента;
    • max-width – задает максимально возможную ширину элемента.

Каждый из указанных атрибутов стиля может принимать в качестве значений любые единицы длины, поддерживаемые в CSS, например:

width: 200px (в пикселях)
width: 2in (в дюймах)
width: 20% (в зависимости от значения аналогичного атрибута родителя)

Также допустимо использование следующих значений атрибутов управления размерами:

  • auto – размер устанавливается в зависимости от размеров контента;
  • inherit – значение наследуется от родителя.

Добавить комментарий

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