100％的高度 - PX

Question

我有高度的100％的頁面：

<div id="wrapper"> 
    <header id="header" class="clearfix"> 

    </header> 
    <div class="main-container clearfix"> 
     <aside id="sideLeft"> 

     </aside><!-- #sideLeft --> 
     <div id="content"> 
      <div id="map_canvas"></div> 
     </div> 
    </div> <!-- #main-container --> 
</div><!-- #wrapper --> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    height: 100%; 
    min-height: 100%; 
} 
#wrapper { 
    width: 100%; 
    height: 100%; 
} 
#header { 
    width: 100%; 
height: 45px; 
} 
.main-container { 
    width: 100%; 
    height: 100%; 
    min-height: 100%; 
} 

#content { 
    height: 100%; 
margin-left: 20%; 
} 

#map_canvas { 
    height: 100%; 
    width: 100%; 
} 
#sideLeft { 
    height: 100%; 
    width: 20%; 
    float: left; 
} 

但我想讓含量100％ - 頭的高度（PX ），不要在頁面上顯示滾動。

我嘗試添加position: absolute;到#header和.main-container，但它沒有幫助（滾動仍然顯示）。

活生生的例子：http://indoor.powerhtml.ru/30/index.html

Answer 1

CSS不能頁面上進行計算和處理，它僅僅是一個樣式表。你必須爲此使用JS。

jQuery的片段做你想要的是

$("#header").height($("#header").height()); //This automatically converts % to px 

Check it out