Menu
I'd like to show a div that has a background-color with the height and width set to 100% but no content. Is it possible to do that without putting a inside?
Edit: Thanks to Mark Biek for pointing out that empty div with width and height styles shows how I'd expect. My div is in a table cell, where it does not show.
<table style="width:100%">
<tr>
<th>Header</th>
<td><div id="foo"></div></td>
</tr>
</table>
638
empty divs are something generally to be avoided, but not invalid nor anything to get hung up about.
Use the childNodes property to check if a div element is empty. The childNodes property returns a NodeList of the element's child nodes, including elements, text nodes and comments. If the property returns a value of 0 , then the div is empty.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
This seems to work in 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>
142
Hmmm... I'm not sure what exactly the specs say, but I know that while empty inline-elements (e.g. span) are valid, empty block-elements (e.g. p or div) get "cleaned up" by html-tidy.
Thus I'd say it's safer to stick to the as it does no harm in your case. I'd also add a comment like "<!-- background container -->" or something like that. So everyone who's going to change your html knows that the div has a special meaning even though it's empty.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
