CSS: Set Div Height to 100% - Pixels

CSS How to set div height 100% minus nPx

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>

css - 100% height with pixel min-height

How about giving the image the min-height instead of the container?

How to add some pixels to the current height of div

Use padding.

 div {
      height: auto;
      padding-bottom: 10px;
    }

 div {
      height: auto;
      padding-top: 10px;
    }

 div {
      height: auto;
      padding-top: 5px;
      padding-bottom: 5px;
    }

if this is not you desired then add jQuery together with the css like below:
css:

 div#auto10 {
      height: auto;
    }

javascript:

$(document).ready(function(){
    $('#auto10').height($('#auto10').height() + 10);
});

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {  display: block;  position:absolute;  height:auto;  bottom:0;  top:0;  left:0;  right:0;  margin-top:20px;  margin-bottom:20px;  margin-right:80px;  margin-left:80px;  background-color: green;}

<div class="stretchedToMargin">  Hello, world</div>

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);