如何保持頂部div高度固定，底部div高度為％age

Question

我在頁面中創建了兩個div，一個是標題，另一個是內容

   <div id="main"> 
    <div id="header">
    </div>
    <div id="content"> 
    </div>
   </div>

而風格是

<style>
#main{
height:100%;
}
#header{
height:100px
}

#content{
height:???? // to fit the content 100% on any kind of screen 
}
</style>

我想根據屏幕調整內容。 屏幕高度可以是100px，可能是2000px。 我怎么能用css做到這一點。 我不希望底部有空格或滾動頁面

Answer 1

如果你使用CSS3很好，這段代碼：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main{
    height:100%;
    background-color: blue;
}

#header{
    height: 10%;
    background-color: green;
}

#content{
    height: -webkit-calc(100% - 105px);
    background-color: red;
}

將在chrome中做到這一點。 您必須為其他瀏覽器測試calc屬性的替代方案。 您將必須使用父元素的邊距和填充來獲得您想要的效果，但這是個主意。

如果CSS3不是一個選項，那么你將不得不以百分比定義你的標題，除非比我聰明的人能給你一個更好的選擇:)。

Answer 2

如果你想使用css進行這種布局，你必須看看這些。

display: box;

要么

height: calc(100% - 100px);

但舊瀏覽器不支持這些。 顯示：框在ie9中不起作用。

所以做一些JavaScript。

document.getElementById('content').style.height = (document.getElementById('main').clientHeight - 100) + "px";

在body的onload事件中調用它。

Answer 3

添加這些行

             html,body{height:100%;}.

             #main{height:100%; }
             #header{height:100px; background:#ccc; }
             #content{min-height:90%; background:#666; }​

這將使您在屏幕中進行調整

Answer 4

添加html, body { height: 100%; } html, body { height: 100%; }和使用position:absolute

讓內部div都有position:absolute ，它應該從瀏覽器的頂部開始。 使用z-index切換div。

HTML

<div id="main"> 
    <div id="header">c
    </div>
    <div id="content">
       <div class="hidden">This div helps to push the content 100px below</div>
        cxbvbvbvcbv
    </div>
   </div>​

CSS

html, body {  height: 100%;   }
#main{height:100%; position:relative}
#header{height:100px; background:green; position:absolute; top:0; left:0; width:100%; z-index:1000}
#content{height:100%; background:grey; position:absolute; top:0; left:0; width:100%; z-index:1; }​

DEMO更新

Answer 5

在css試試這個

html, body {  height: 100%;   }
#main{height:100%; overflow:hidden}
#header{height:100px; background:green; }
#content{height:100%; background:#F00; overflow:auto; }​

這是小提琴鏈接