Нужно показать пустой <div>?

Я хотел бы показать div, который имеет фоновый цвет с высотой и шириной, установленной на 100%, но без содержимого. Возможно ли это сделать, не помещая & nbsp; внутри?

Edit: Спасибо Mark Biek за указание, что пустой div с стилями ширины и высоты показывает, как я ожидал. Мой div находится в ячейке таблицы, где он не отображается.

<table style="width:100%">
<tr>
<th>Header</th>
<td><div id="foo"></div></td>
</tr>
</table>

ОТВЕТЫ

Ответ 1

Это похоже на работу в Firefox, Safari, IE6 и IE7.

<html>
    <head>
        <style>
            #foo{
                background:  #ff0000;
                width:  100%;
                height:  100%;
                border:  2px dashed black;
            }
        </style>
    </head>
    <body onload="">
        <div id="foo"></div>
    </body>
</html>

3 Browser example

Ответ 2

Хммм... Я не уверен, что именно говорят спецификации, но я знаю, что, когда пустые встроенные элементы (например, span) действительны, пустые блок-элементы (например, p или div) получают "очистку" HTML-аккуратно.

Таким образом, я бы сказал, что безопаснее придерживаться & nbsp; так как это не вредит вашему делу. Я также добавил бы комментарий, например "<! - background container → " или что-то типа того. Поэтому каждый, кто собирается изменить ваш html, знает, что div имеет особое значение, даже если оно пустое.

Ответ 3

ИМХО, вы должны включить nbsp для других пустых DIV, если вы хотите, чтобы они фактически отображали что-то.

По теоретической заметке.. браузер не предположительно, чтобы показывать что-либо, если нет содержимого. Вся точка nbsp указывает на пустое пространство. Это и здравый смысл, и (я считаю) стандарт.

На практической стороне.. у вас есть три варианта. Один из них - оставить nbsp, зная, что вы получите непредсказуемые результаты. Скорее всего, это самый простой код. Другой - всегда включать nbsp, либо всегда помещая nbsp в конец div, либо тестируя для пустого и добавляя nbsp, если он пуст. Третий - проверить браузер и вставить nbsp, когда это необходимо.

Ответ 4

Я думаю, что это зависит от браузера (движок IE/Gecko engine/Webkit) и от режима (режим стандартов, режим Quirks). У меня были некоторые divs, появляющиеся в режиме FFox/Standards и не появляющиеся в IE6/7.

Вы, вероятно, можете сделать это в кросс-браузере с помощью только css, но вы, вероятно, прибегнете к некоторым взломам css.

Ответ 5

Из опыта IE не будет отображать границы пустых элементов (по крайней мере, пустые элементы <td> )

Ответ 6

возможно,

#foo {empty-cells: show;}

хотя это может быть только для <td>

Ответ 7

Вы должны включать &nbsp; в любое время.