Setting width/height as percentage minus pixels
You can use calc
:
height: calc(100% - 18px);
Note that some old browsers don't support the CSS3 calc()
function, so implementing the vendor-specific versions of the function may be required:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
I use Jquery for this
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
then I bind the window resize to recalc it whenever the browser window is resized (if container's size changed with window resize)
$(window).resize(function() { setSizes(); });
For a bit of a different approach you could use something like this on the list:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
This works as long as the parent container has position: relative;