CSS: автоматическая высота, на содержа отделение, 100% высотой на второстепенном отделении в содержании отделения

Question

CSS: автоматическая высота, на содержа отделение, 100% высотой на второстепенном отделении в содержании отделения

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

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

Фон и контейнерные отделения имеют 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.
}

35

css height

задан Joe 8 June 2013 в 09:45

2 ответа

Другие вопросы по тегам:

css height

Похожие вопросы:

score 5 · Answer 1

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

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

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

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

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

score 3 · Answer 2

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

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

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