Мы делаем сайт для TEDx в нашем городе, и мы застряли ..Как сделать DIV заполнить весь экран после загрузки страницы
Вот черновик его: tedx.mozerov.ru
У нас есть div id = "section-event", который мы хотим быть для всей страницы при загрузке. Мы добавили высоту: 100%; и ширина: 100% ;, но блок еще не заполняет всю страницу :(
Пожалуйста, помогите
Ну, не знаю, как вы собираетесь использовать этот DIV, но:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
Ваш ответ должен работать хотя бы на основе информации, но обратите внимание, что это будет заполнять только страницу, если div не является дочерним элементом другого тега, который расположен относительно или абсолютно с определенной шириной/высотой, меньшей ширины/высоты страницы , – rogMaHall
Нанести высоту:.. 100% для обеих HTML и тело элементов Я просто проверял в FireBug, и я думаю, что это достигается эффект, который вы хотите
Закрыть, но нет сигары. Я просто испытал это тоже. – adaam
то, что вы, вероятно, нужно margin: 0px в body
Я до сих пор не могу прокомментировать ответы других людей, так вот мой ответ, и это только простое дополнение к uotonyh, которое может работать.
Сделать позицию абсолютной и добавить произвольный z-индекс. Пока z-индекс выше, чем другие абсолютные/относительные DIV, тогда он должен занимать весь видовой экран. Если вы видите пробел сверху и слева, добавьте margin: 0px; к телу css вашего тела.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Это зависит от вашего макета сайта, иногда у вас есть несовместимости. Но в общем-то, как это работает:
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Я видел это используется в некоторых местах, где <div id="redoverlay"></div> элемент существует во все времена, но с отключенным его видимость. Когда нужно, чтобы его набор был видимым с помощью JavaScript.
Решение о добавлении позиция: абсолютная; верх: 0; слева: 0; определенно помогает, но! Он определенно заполняет экран так, как мы этого хотим, но теперь ближайшие divs идут сверху желаемого :( Нужно ли что-то делать с абсолютным позиционированием? Потому что, когда я делаю позицию: realtive; div не заполняет весь экран, но следующие divs в порядке. Вот пример: tedx.mozerov.ru – lakeoffm
Мы нашли решение! Добавим позицию: абсолютный, высота: 100%, ширина: 100%; тег тела, а затем наш div попадает на весь экран без атрибута позиционирования :) просто высота: 100% и ширина: 100%. – lakeoffm
Спасибо всем, кто участвовал! – lakeoffm