While the problem is that an element, other than the <html> root element, needs a parent with a specified width (in order to calculate its own relative height), you can avoid the problem using units relative to the viewport, such as vh (1vh is equal to one-percent of the height of the view-port, and so is pretty much a direct drop-in replacement for a %-based height), such as:
body {
margin: 0px;
padding:0px;
height: 100vh;
background-color: black;
}
#Container {
width: 98%;
height: 100%;
background-color: grey;
}
JS Fiddle demo.
The problem with that approach, of course, is that it restricts the content of the #Container from growing and allowing the <body> to scroll (this may be by-design, of course), but you could instead use min-height to obviate the problem, and allow the elements to grow:
html {
padding: 0;
margin: 0;
}
body {
margin: 0px;
padding:0px;
min-height: 100vh;
background-color: black;
}
#Container {
width: 98%;
min-height: 100vh;
background-color: grey;
}
#expansion {
height: 3000px;
width: 2em;
background-color: #f00;
}
JS Fiddle demo.
(Note that in the above demo I'm using another element to force the #Container to expand, that's purely for demonstration purposes, and is not required by this approach.)
References:
