有没有办法减少带有边距或其他东西的元素的高度？答案

【问题标题】：Is there a way to reduce the height of an element with margins or something?有没有办法减少带有边距或其他东西的元素的高度？
【发布时间】：2012-11-12 14:20:41
【问题描述】：

因为我想有一个固定高度的栏和一个占据页面其余部分的地图，所以这会很棒。

我试过这样：

#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;
}

如果创建了这个小提琴： http://jsfiddle.net/bmPpq/

附：我已经积极在网上搜索解决方案，但没有成功（除了使用 JS，但这很糟糕..）

基本上这就是我想要的：

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

【问题讨论】：

你想减少哪个元素的高度？
你想让它看起来像jsfiddle.net/bmPpq/8？

标签： html css height margin

【解决方案1】：

试试这个..

 #header{
     position:relative;
    ...


    #map{
     position:relative;
      ....

【讨论】：

【解决方案2】：

您可以为此在地图上使用 min-height。这应该有效：

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

【讨论】：