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

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

    <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 стиль, можно говорить о том, что подход до конца себя еще не изжил.

Контейнерный

Также контейнер может отображать содержимое внешней, по отношению к нему веб — страницы, при этом, в отличие от фреймов, контейнеры стандартизованы консорциумом 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 – значение наследуется от родителя.