CODEWITHSUNDEEP
htmlcssheightmargin
coiso
coiso

Reputation: 7479

Is there a way to reduce the height of an element with margins or something?

Since I want to have a bar with fixed height and a map that ocupies the rest of the page this would be great.

I have tried like so :

#header{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:30pt;
 background-color:#ff0066;
 z-index:2;
}

 //element to reduce
#map{
 position:absolute;
 height: 100%;   
 width: 100%;
 background-color:blue;
 margin-top:30pt;
 margin-bottom:-30pt;
}

If have created this fiddle : http://jsfiddle.net/bmPpq/

P.S. I have actively searched the web for a solution to this with no success (except for using JS, but that sucks..)

Bascicly this is what I want:

 #map{
 height: 100% - 30pt;   
}

Upvotes: 0

Views: 184

Answers (2)

Nitish
Nitish

Reputation: 299

try this.. 

 #header{
     position:relative;
    ...


    #map{
     position:relative;
      ....

Upvotes: 0

Albert
Albert

Reputation: 2115

You can use min-height on the map for that. This should work:

#map{
  min-height: 100%;
  width: 100%;
  height: auto;
  position: fixed;
  top: 30;
  left: 0;
  background-color:blue;
}

​

Upvotes: 1

Related Questions