Css фоновые слои и 100% высоты div - PullRequest
Новая
       20

Css фоновые слои и 100% высоты div

0 голосов
/ 14 апреля 2010

Представьте себе следующий код. 

<body id="first_bg_layer">
  <div id="second_bg_layer">
    <div id="third_bg_layer">
    </div>
  </div>
</div>

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

Установка минимальной высоты на 100% не работает по разным причинам. Есть ли способ сделать это?

Редактировать: Если я установлю #second_bg_layer на height: 100% и #third_bg_layer на min-height: 100%, это работает. Но тогда #second_bg_layer блокируется на 100% и больше не будет расширяться.

То, что я хочу сделать, это установить минимальную высоту для обоих элементов div или другое решение.

Ответы [ 3 ]

1 голос
/ 14 апреля 2010

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

html, html body {высота: 100%;}

Затем div, содержащий все содержимое. Этакая обертка, если вы хотите так ее назвать.

... div-обертка, который я бы установил {высота: 100%; минимальная высота: 100%;} В своем классе или id.

Но, к сожалению, IE не поддерживает ни min-height, ни height: auto, так что ...

просто установите сначала строку регистра IE: {height: 100%;}

, а затем CSS, который будет применяться к другим браузерам:

html> body what_the_div_class {height: auto; min-height: 100%;}

Наконец, сделайте div нижнего колонтитула, чтобы поместить его вне этого div-оболочки, сразу после него, к каким свойствам CSS вы добавите:

высота 1%; ясно: как (1%, как часто бывает, IE нуждается в некотором «пробеле» или будет делать странные вещи)

Что ж, будем надеяться, это поможет:)

0 голосов
/ 14 апреля 2010

Если вы просто не получаете полную ширину и высоту из области тела, то, возможно, вы запрашиваете следующее: 

html, body {
    height: 100%; width: 100%;
}

/* And perhaps adding this if you're not using any reset CSS */
html, body {
    margin: 0; padding: 0;
}

Если это не так, я не уверен, с чем у вас проблемы, но фоновое изображение не может быть отображено за пределами выбранного элемента. Если вы хотите отличить фоновый слой от самого слоя, я бы предложил использовать дополнительный div, имеющий width / height: 100%; положение: абсолютное; верхний / левый: 0; и фон: URL (...); держать фоновое изображение.

0 голосов
/ 14 апреля 2010

Вы установили высоту HTML и BODY на 100% с 0 полями? Если нет, сделайте это, если это так, убедитесь, что ваши элементы div расположены правильно.

...