Блог

Главная - Вопросы по программированию - установить цвет фона div в теле

установить цвет фона div в теле

#html #css

#HTML #css

Вопрос:

Я пытаюсь установить цвет фона тега div, который находится в теге body, на весь экран, но я не нашел удовлетворительного решения этой проблемы:

 ...
<body>
  <div>
  </div>
</body>
...

Как я могу установить цвет фона всей страницы из тега div, который находится в теле?

выполнение

 div {
  background-color: green;
}

не делает фон зеленым.

Комментарии:

1. Почему вы не устанавливаете body {background-color: xxx} ?

Ответ №1:

Почему вы не можете просто установить цвет фона тела?

В любом случае вам придется сделать что-то вроде этого:

CSS:

 html, body { padding: 0; margin: 0; height: 100%; }

#fake_body { width: 100%; height: 100%; background: #000; }

HTML:

 <html>
    <body>
        <div id="fake_body"></div>
    </body>
</html>

Если я чего-то не упустил, это должно сработать. jsFiddle

Комментарии:

1. Демонстрация: jsfiddle.net/hfmLT Единственная недостающая часть — это как предотвратить поля / отступы в разных браузерах…

2. Только что обновлено с сбросом полей / отступов до 0 пикселей и добавлением обновленной скрипки, спасибо, что указал на это, Джаред 🙂

3. Да, я знаю, что могу просто установить фон в теге body, но незнание того, что должно быть возможно, меня бесит. И, кстати, об этой части поля, обычно вам нужно включить отдельный css, называемый «сбросить таблицу стилей», для лучшей кросс-браузерной совместимости.

4. Большинство людей включают сброс, их тоже много, но все они делают то же самое. Если у вас уже включен сброс, то, скорее всего, он уже установил бы для полей / отступов страниц значение 0. Просто попробуйте это с моими стилями заполнения / полей и без них и посмотрите, нужны ли они вам.

Ответ №2:

Просто убедитесь, что div покрывает всю страницу, я полагаю.

 #divID {
background-color: #fff;
top: 0;bottom: 0;right: 0;left: 0;
position: absolute;
}

Примечание:

Вау, 2011.. Наверное, я опаздываю на вечеринку.. безусловно. В любом случае, ради Google.

Метки: