используя только CSS, возможно ли создать div, который точно охватывает всю область содержимого документа?

Question

Мне просто интересно, возможно ли использовать только CSS, но не javascript, чтобы стилизовать DIV, который будет точно покрывать всю область контента? (примечание: весь контент, а не только окно просмотра). Это кажется невозможным, потому что элемент имеет некоторое поле, и кажется, что нет простого способа стилизовать div, включив в него ширину поля и высоту элемента body. Но на самом деле это возможно?

Обновление : извините, требование состоит в том, что мы не можем установить поле равным 0 ... (update2: скажем, если нам нужно превратить его в библиотеку и Спросите всех людей, которые используют его, чтобы у тела было поле 0)

Answer 1

Конечно, я думаю.

Сброс полей по умолчанию:

* { margin: 0; padding: 0; }

тогда для

<div id="shader"></div>

сделать:

#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}

Answer 2

Это, вероятно, решение, но оно не будет работать в IE ...

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }

Answer 3

Если установлено поле , то не могли бы вы использовать отрицательные поля на

для переопределения полей ? Я понимаю, что поля могут варьироваться в зависимости от браузера. Если у есть запас в 10px, тогда стиль вашего div так:

div#mydiv {
margin: -10px;
}

Вы бы использовали тот же принцип для переопределения заполнения (если применимо).

Answer 4

Логически это невозможно. Ваш DIV должен идти внутрь тела, а не снаружи.

Или, другими словами, вы просили охватить всю «область содержимого», но на самом деле это не то, что вы хотите, вы хотите, чтобы все тело было покрыто.

У Lazlow лучшее предложение. Может быть, установить отрицательные поля / отступы на что-то большое, чтобы вы могли быть уверены, что оно больше, чем в браузере по умолчанию, а затем иметь внутренний div с теми же значениями полей / отступов, только положительными?

Answer 5

<style type="text/css">
    #superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>

<div id="superdiv">
    Put some content here.
</div>

Answer 6

Я думаю, что подход MiffTheFox - лучший, потому что его решение охватывает ситуацию, когда другие div имеют абсолютное позиционирование. Помните, что элементы абсолютного позиционирования уходят из потока, и если какой-либо элемент расположен, например, сверху: 9000px, рост не будет> 9000px.

Answer 7

Я думаю, что нет никакого способа заставить div "плавать" над вашим браузером, если бы так, то технология могла бы преодолеть ваш экран, что-то вроде body style = "margin: -40px" - должно ли это кровоточить на вашем рабочем столе?

И, кстати, стиль html ненормален, что бы вы сделали дальше? стиль , ?? В любом случае они есть, так что вы можете установить стили для всех из них, но я не думаю, что это будет намного умнее.

Я не знаю, может ли это помочь:

<div style="margin:-100%">

Но я сомневаюсь, что это может преодолеть окно браузера ...

Answer 8

Понравился ответ Амброуза. Тело является основным контейнером для вашего HTML. Я не видел никаких полей в теле с Mozilla, Chrome, IE или Opera - текущие версии. Чтобы доказать это: стиль
body {background-color: yellow;} / * и посмотрите. * /

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

Answer 9

что по этому поводу?

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...

Answer 10

Да. Вы просто устанавливаете отступы и поля тега body на 0, а затем устанавливаете отступы и поля тега div на ноль.