CSS: автоматическая высота для содержимого div, 100% высоты для фона div внутри содержащего div - PullRequest
Новая
       11

CSS: автоматическая высота для содержимого div, 100% высоты для фона div внутри содержащего div

35 голосов
/ 06 мая 2010

Проблема в том, что у меня есть div контента, который растягивает свой контейнер по высоте (у контейнера и div контента есть auto height).

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

Ширина фона и контейнера равна 100%, а контейнера содержимого - нет.

HTML: 

<div id="container">  
    <div id="content">  
        Some long content here ..  
    </div>  
     <div id="backgroundContainer">  
         <div id="someDivToShowABackground"/>  
         <div id="someDivToShowAnotherBackground"/>  
    </div>  
</div>

CSS: 

#container {
    height:auto;
    width:100%;
}

#content {
    height: auto;
    width:500px;
    margin-left:auto;
    margin-right:auto;
}

#backgroundContainer {
    height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport.
}

Ответы [ 9 ]

40 голосов
/ 01 июля 2012

В 2018 году многие браузеры поддерживают Flexbox и Grid , которые являются очень мощными режимами отображения CSS, которые перекрывают классические методы, такие как в качестве искусственных столбцов или табличных дисплеев (которые рассматриваются позже в этом ответе).

Чтобы реализовать это с помощью сетки, достаточно указать display: grid и grid-template-columns на контейнере. grid-template-columns зависит от количества имеющихся у вас столбцов, в этом примере я буду использовать 3 столбца, поэтому свойство будет выглядеть так: grid- template-columns: auto auto auto , что в основном означает, что каждый из столбцов будет иметь автоматическую ширину.

Полный рабочий пример с сеткой: 

html, body {
    padding: 0;
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    width: 100%;
}

.grid-item {
    padding: 20px;
}

.a {
    background-color: DarkTurquoise;
}

.b {
    background-color: LightSalmon;
}

.c {
    background-color: LightSteelBlue;
}
<!DOCTYPE html>
<html>
<head>
    <title>Three Columns with Grid</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="grid-container">
        <div class="grid-item a">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
        </div>
        <div class="grid-item b">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
        </div>
        <div class="grid-item c">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
        </div>
    </div>
</body>
</html>

Другим способом было бы использовать Flexbox, указав display: flex в контейнере столбцов и присвоив столбцам соответствующую ширину. В примере, который я буду использовать, который состоит из 3 столбцов, вам нужно разделить 100% на 3, так что это 33,3333% (достаточно близко, кого волнует 0,00003333 ... которого все равно не видно).

Полный рабочий пример с использованием Flexbox: 

html, body {
    padding: 0;
    margin: 0;
}

.flex-container {
    display: flex;
    width: 100%;
}

.flex-column {
    padding: 20px;
    width: 33.3333%;
}

.a {
    background-color: DarkTurquoise;
}

.b {
    background-color: LightSalmon;
}

.c {
    background-color: LightSteelBlue;
}
<!DOCTYPE html>
<html>
<head>
    <title>Three Columns with Flexbox</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="flex-container">
        <div class="flex-column a">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
        </div>
        <div class="flex-column b">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
        </div>
        <div class="flex-column c">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
        </div>
    </div>
</body>
</html>

Flexbox и Grid поддерживаются всеми основными браузерами с 2017/2018, факт также подтверждается caniuse.com: Могу ли я использовать сетку , Могу ли я использовать flex .

Существует также ряд классических решений, использовавшихся до появления Flexbox и Grid, таких как Метод OneTrueLayout , Метод искусственных столбцов , Техника табличного отображения CSS , а также есть Техника наложения .

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

Решением для столбцов одинаковой высоты является Техника табличного отображения CSS , которая означает использование дисплея : таблица , Работает для Firefox 2 + , Safari 3 + , Opera 9 + и IE8 .

Код для табличного дисплея CSS : 

#container {
  display: table;
  background-color: #CCC;
  margin: 0 auto;
}

.row {
  display: table-row;
}

.col {
  display: table-cell;
}

#col1 {
  background-color: #0CC;
  width: 200px;
}

#col2 {
  background-color: #9F9;
  width: 300px;
}

#col3 {
  background-color: #699;
  width: 200px;
}
<div id="container">
  <div id="rowWraper" class="row">
    <div id="col1" class="col">
      Column 1<br />Lorem ipsum<br />ipsum lorem
    </div>
    <div id="col2" class="col">
      Column 2<br />Eco cologna duo est!
    </div>
    <div id="col3" class="col">
      Column 3
    </div>
  </div>
</div>

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

Метод Faux Column является наиболее популярным классическим решением этой проблемы, но у него есть некоторые недостатки, такие как, вы должны изменить размер фонового мозаичного изображения, если вы хотите изменить размер колонны и это тоже не изящное решение.

Метод OneTrueLayout состоит из создания отступа на очень большой высоте и его обрезания путем приведения реальной граничной позиции в «нормальную логическую позицию» путем применения отрицательное значение margin-bottom того же огромного значения и скрытие экстента, созданного заполнением с переполнением: скрыто , примененное к обертке содержимого , Упрощенный пример будет:

Рабочий пример: 

.wraper {
    overflow: hidden; /* This is important */
}

.floatLeft {
    float: left;
}

.block {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30000px; /* This is important */
    margin-bottom: -30000px; /* This is important */
    width: 33.3333%;
    box-sizing: border-box; /* This is so that the padding right and left does not affect the width */
}

.a {
    background-color: DarkTurquoise;
}

.b {
    background-color: LightSalmon;
}

.c {
    background-color: LightSteelBlue;
}
<html>
<head>
  <title>OneTrueLayout</title>
</head>
<body>
    <div class="wraper">
        <div class="block floatLeft a">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis.</p>
        </div>
        <div class="block floatLeft b">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit. Praesent sed pellentesque lorem. Nam neque ante, egestas ut felis vel, faucibus tincidunt risus. Maecenas egestas diam massa, id rutrum metus lobortis non. Sed quis tellus sed nulla efficitur pharetra. Fusce semper sapien neque. Donec egestas dolor magna, ut efficitur purus porttitor at. Mauris cursus, leo ac porta consectetur, eros quam aliquet erat, condimentum luctus sapien tellus vel ante. Vivamus vestibulum id lacus vel tristique.</p>
        </div>
        <div class="block floatLeft c">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit.</p>
        </div>
    </div>
</body>
</html>

Техника наслаивания должна быть очень аккуратным решением, которое включает в себя абсолютное позиционирование div'ов внутри основного относительного позиционируемого упаковщика div. В основном он состоит из нескольких дочерних элементов и основного элемента. Основной div имеет обязательное положение : относительно к его коллекции атрибутов css. Все дети этого div обязательно позиция: абсолютная . Дети должны иметь верх и низ , установленный на 0 и влево-вправо Размеры установлены для размещения столбцов друг с другом. Например, если у нас есть два столбца, один из которых имеет ширину 100px , а другой - 200px , учитывая, что нам нужно 100px в левой части и 200px с правой стороны в левой колонке должно быть {left: 0; справа: 200px} и правый столбец {left: 100px; справа: 0;}

По моему мнению, невыполненная 100% высота в контейнере автоматической высоты является серьезным недостатком, и W3C следует рассмотреть возможность пересмотра этого атрибута (который с 2018 года можно решить с помощью Flexbox и Grid).

Другие ресурсы: ссылка1 , ссылка2 , ссылка3 , ссылка4 , ссылка5 (важно)

9 голосов
/ 29 июля 2012

Марка #container до display:inline-block

#container {
  height: auto;
  width: 100%;
  display: inline-block;
}

#content {
  height: auto;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

#backgroundContainer {
  height: 200px; /*200px is example, change to what you want*/
  width: 100%;
}

Также см .: W3Schools

5 голосов
/ 06 мая 2010

Хорошо, так что кто-то, вероятно, собирается дать мне пощечину за этот ответ, но я использую jQuery для решения всех своих раздражающих проблем, и оказывается, что я сегодня что-то использовал, чтобы исправить подобную проблему. Предполагая, что вы используете jquery: 

$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());

это не проверено, но я думаю, что вы можете увидеть концепцию здесь. После загрузки вы можете получить высоту (externalHeight включает отступы и границы, innerHeight только для содержимого). Надеюсь, это поможет.

Вот как вы привязываете его к событию изменения размера окна: 

$(window).resize(function() {
  $("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});
3 голосов
/ 06 мая 2010

Где-то вам нужно будет установить фиксированную высоту, вместо того, чтобы везде использовать авто. Вы обнаружите, что если вы установите фиксированную высоту для своего контента и / или контейнера, то с помощью auto для вещей внутри него будет работать.

Кроме того, ваши ящики будут по-прежнему расширяться по мере увеличения содержания, даже если вы установили для него высоту - так что не беспокойтесь об этом:) 

#container {
  height:500px;
  min-height:500px;
}
1 голос
/ 21 августа 2013

Просто короткая заметка, потому что мне было тяжело с этим.

Используя #container {overflow: hidden; } у страницы, с которой у меня начались проблемы с макетом в Firefox и IE (при увеличении и увеличении масштаба содержимое будет подпрыгивать и выходить из родительского div).

Решением этой проблемы является добавление отображения: inline-block; к тому же div с переполнением: скрыто;

1 голос
/ 13 января 2012

Вам не нужно устанавливать height: 100% в любой момент, если вы хотите, чтобы ваш контейнер заполнил страницу. Скорее всего, ваша проблема коренится в том, что вы не очистили поплавки в дочерних элементах контейнера. Существует несколько способов решения этой проблемы, в основном добавление overflow: hidden в контейнер. 

#container { overflow: hidden; }

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

0 голосов
/ 15 марта 2015 
{
    height:100vh;
    width:100vw;
}
0 голосов
/ 01 декабря 2014

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

, т.е. не указывайте высоту: 100% или любое другое значение.

0 голосов
/ 02 июня 2013

В итоге я сделал 2 отображения: таблица; 

#container-tv { /* Tiled background */
    display:table;
    width:100%;
    background-image: url(images/back.jpg);
    background-repeat: repeat;  
}
#container-body-background { /* center column but not 100% width */ 
    display:table;
    margin:0 auto;
    background-image:url(images/middle-back.png);
    background-repeat: repeat-y;

}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...