CSS DIV позиционируется абсолютное не расширяется вплоть до нижней

Я пытаюсь использовать абсолютный DIV в качестве моего фона (только на определенном pages..I не может использовать тело для этой цели)CSS DIV позиционируется абсолютное не расширяется вплоть до нижней

Однако я не способный расширить его до нижней части страницы. Просьба помочь.

Черный фон находится только к середине страницы. Обратите внимание, в моей скрипкой

http://jsfiddle.net/z9Unk/317/

CSS

.background { 
    position:absolute; 
    width: 100%; 
    height: 100%; 
    z-index:-1; 
    background:black; 
} 

.container { 
    height: 100%; 
    width:100%; 
} 

.item { 
    width:100px; 
    height:100px; 
    border:1px solid red; 
}

HTML:

<div class="background"> 
    Hover Me 
</div> 

<div class="container"> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 

</div>

источник

2013-09-19 GJain

Что вы хотите position: fixed, не position: absolute. См. this jsFiddle.

В качестве альтернативы, почему бы не просто установить background-color вашего <body>?

источник

2013-09-19 22:54:06 chopper

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

Использование position: fixed;

DEMO http://jsfiddle.net/kevinPHPkevin/z9Unk/322/

.background { 
    position:fixed; 
    width: 100%; 
    height: 100%; 
    z-index:-1; 
    background:black; 
}

Если вы хотите по-прежнему использовать position: absolute; вам нужно будет установить body к position: relative;

DEMO http://jsfiddle.net/kevinPHPkevin/z9Unk/324/

body { 
    position: relative; 
}

источник

2013-09-19 22:54:57 Vector

Я не могу использовать тело для этой цели

Почему нет?

Просто добавьте другой класс или идентификатор к элементу тела каждой страницы и определите свои разные фоны/фоновые изображения в коде CSS!

Вы используете презентационную разметку, которая семантически неверна.

PS: Вот ссылка FYI The Motive Web Design Glossary

источник

2013-09-19 23:04:35 Netsurfer

Хмм .... дайте мне понять это больше .... Я не уверен, что такое презентационная надпись ... спасибо за отзыв ... – GJain

только один вопрос ... вы не будете делать то, что я делаю в производстве. .. это так плохо ???? ... – GJain

@ user2384694: Да, я бы этого не сделал. Вы никогда не должны использовать HTML-элементы в своей разметке, которые не нужны для семантической структуры вашего контента. Или другими словами: не добавляйте элементы в свою разметку HTML, которые предназначены только для презентационных целей (которые служат только для оптики). Из-за некоторых ошибок браузера или других недостатков в поддержке CSS есть некоторые исключения (всего несколько). В твоем случае ни один из них ...! ;-) – Netsurfer

CSS DIV позиционируется абсолютное не расширяется вплоть до нижней

ответ

Смежные вопросы