Подтвердить что ты не робот

CSS: высота авто по содержанию div, высота 100% на фоне div внутри, содержащая div

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

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

Фоновые и контейнерные divs имеют ширину 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.
}
4b9b3361

ОТВЕТЫ

Ответ 1

Для решения этой проблемы существует ряд решений, в том числе Технология OneTrueLayout Technique, Техника искусственных колонок, CSS > , а также a Техника слоев.

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

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

HTML

<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>

CSS

<style>
#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;
}
</style>

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

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

OneTrueLayout Technique состоит из создания нижней части крайней большой высоты и ее вырезания, приведя реальное положение границы к "нормальное логическое положение", применяя отрицательный край дна того же огромного значения и скрывая степень, создаваемую дополнением с переполнением: скрытое, применяемое к wapper содержимого. Упрощенный пример:

Файл HTML:

<html><head>
<style>
.wraper{
    background-color:#CCC;
    overflow:hidden;
}

.floatLeft{
    float:left; 
}

.block{
    padding-bottom:30000px;
    margin-bottom:-30000px;
    width:100px;
    background-color:#06F;
    border:#000 1px solid;
}
</style>
</head>
<body>
    <div class="wraper">
    <div class="block floatLeft">first col</div>
        <div class="block floatLeft">
                Second col<br />Break Line
        </div>
    <div class="block floatLeft">Third col</div>
</div>
</body>
</html>

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

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

Другие ресурсы: link1, link2, link3, link4, link5 (важно)

Ответ 2

Сделайте #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

Ответ 3

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

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

Это непроверено, но я думаю, вы можете увидеть концепцию здесь. В основном после его загрузки вы можете получить высоту (внешнийHeight включает в себя дополнение + границы, innerHeight для контента). Надеюсь, что это поможет.

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

$(window).resize(function() {
  $("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});

Ответ 4

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

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

#container {
  height:500px;
  min-height:500px;
}

Ответ 5

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

#container { overflow: hidden; }

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

Ответ 6

Просто быстро, потому что мне было трудно с этим.

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

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

Ответ 7

В итоге я создал 2 display: table;

#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% размера окна браузера

Ответ 8

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

то есть. ни дать высоту: 100%, ни к какой-либо другой ценности.

Ответ 9

{
    height:100vh;
    width:100vw;
}