的CSS佈局，固定和流體混合

Question

我試圖做一個聊天室的佈局類似下面的相對寬度：

現在我的問題是，我不知道如何有容器盒佔據整個寬度和高度（使用有效的文檔類型），然後在窗口增長並保持其他常量的情況下使中心div增長。

我很清楚js/css。所以我只需要一些開始的指導方針。我想避免JavaScript來處理，然後設置高度和寬度。

Answer 1

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#container { 
    height: 100%; 
    height: auto !important; 
    margin: 0 auto; 
    min-height: 100%; 
    position: relative; 
    width: 100%; 
} 
.header { 
    display: block; 
    height: 100px; 
    width: 100%; 
} 
.body-left { 
    float: left; 
    width: 70%; 
} 
.body-right { 
    float: right; 
    width: 30%; 
} 
.clear { 
    clear: both; 
} 
.footer { 
    float: left; 
    width: 70%; 
} 

和HTML

<div id="container"> 
    <div class="header"></div> 
    <div class="body-left"></div> 
    <div class="body-right"></div> 
    <div class="clear"></div> 
    <div class="footer"></div> 
</div> 

也就是說，如果這是你尋求

，或者使用下面的JavaScript找出高度並將其分配給您的容器：

function getWindowHeight() { 
    var windowHeight = 0; 

    if (typeof(window.innerHeight) == 'number') { 
     windowHeight = window.innerHeight; 
    } else { 
     if (document.documentElement && document.documentElement.clientHeight) { 
      windowHeight = document.documentElement.clientHeight; 
     } else { 
      if (document.body && document.body.clientHeight) { 
       windowHeight = document.body.clientHeight; 
      } 
     } 
    } 

    return windowHeight; 
} 

window.onload = init; 

function init() { 
    document.getElementByID("container").style.height = getWindowHeight() + "px"; 
}