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

StackOverflow https://stackoverflow.com/questions/908103

  •  05-09-2019
  •  | 
  •  

Вопрос

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

Обновить:извините, требование заключается в том, что мы не можем установить значение margin для <body> равным 0...(обновление 2:скажем, если нам нужно превратить это в библиотеку и мы не можем попросить всех людей, которые ее используют, установить для тела значение margin 0)

Это было полезно?

Решение

Если задано значение <body> margin, то не могли бы вы использовать отрицательные поля для <div> , чтобы переопределить значения <body> margins?Я понимаю <body> поля могут различаться в разных браузерах.Если <body> имеет отступ в 10 пикселей, то оформите свой div следующим образом:

div#mydiv {
margin: -10px;
}

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

Другие советы

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

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

* { margin: 0; padding: 0; }

затем для 

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

делай:

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

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

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

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

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

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

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

а как насчет этого?

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

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

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

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

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

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

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

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

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

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

<div id="superdiv">
    Put some content here.
</div>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top