CSS How to set div height 100% minus nPx

If you need to support IE6, use JavaScript so manage the size of the wrapper div (set the position of the element in pixels after reading the window size). If you don't want to use JavaScript, then this can't be done. There are workarounds but expect a week or two to make it work in every case and in every browser.

For other modern browsers, use this css:

position: absolute;
top: 60px;
bottom: 0px;

Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y" is not w3c-approved, but every major browser supports it. Your two divs #left and #right will display a vertical scrollbar if their content is too high.

For this to work under IE7, you have to trigger the standards-compliant mode by adding a DOCTYPE : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

In CSS3 you could use 

height: calc(100% - 60px);

Tags:

Css

Height

Recent Posts