css 左右兩欄 左邊固定右邊自適應

兩個div並排，左邊為絕對寬度，右邊為相對寬度，這個問題，我也經常遇到，我一般的處理方法是將最大的容器padding-left固定寬度，左邊的固定寬度的一塊position:absolute，然後right的一塊width為百分百

今天學習到人家有三種解決方案，轉載過來

   兩個div並排，很容易實現。如何讓左邊的div為固定寬度，右邊的div為相對寬度呢？需要用到這種布局的情況比較多見，如左邊為導航，右邊為內容的頁面。暫時想到了兩種實現辦法。

方法一，使用position:absolute。代碼如下。
<style>
body{ margin:0; height:100%}
html{ height:100%} /*相容firefox的div高度100%*/
#left{ position:absolute; top:0; left:0; width:200px; height:100%; background-color:#CCCCCC}
#right{ margin-left:200px; height:100%; background-color:#0099FF}
</style>
<div id="left">left</div>
<div id="right">right</div>

這段代碼主要涉及到以下兩點點比較重要的：
（1）相容firefox實現div高度100%；
（2）div絕對位置的妙用；在頁面配置的時候，position:absolute如果靈活的應用，可以達到很好的效果。

方法二 使用float解決div左右布局，左為絕對寬度，右為相對寬度問題
<style type="text/css">
body{ margin:0; height:100% }
html{ height:100% }
#left{ width:150px; height:100%; float:left; _margin-right:-3px; background-color: yellow }
#main{ height:100%; background-color: green }
</style>

<div id="left"></div>
<div id="main"></div>

方法三，代碼如下。方法二可能沒有按照題目要求，但是可以達到一樣的頁面效果。主要是使用了div的float屬性。
<style>
body{ margin:0; height:100%}
html{ height:100%} /*相容firefox的div高度100%*/
#left{ width:200px; height:100%; background-color:#CCCCCC; float:left}
#main{ width:100%; height:100%; background-color:#0099FF}
</style>
<div id="main">
<div id="left">left</div>
Right
</div>

兩個div並排，左邊為絕對寬度，右邊為相對寬度，這個問題，我也經常遇到，我一般的處理方法是將最大的容器padding-left固定寬度，左邊的固定寬度的一塊position:absolute，然後right的一塊width為百分百

今天學習到人家有三種解決方案，轉載過來

   兩個div並排，很容易實現。如何讓左邊的div為固定寬度，右邊的div為相對寬度呢？需要用到這種布局的情況比較多見，如左邊為導航，右邊為內容的頁面。暫時想到了兩種實現辦法。

方法一，使用position:absolute。代碼如下。
<style>
body{ margin:0; height:100%}
html{ height:100%} /*相容firefox的div高度100%*/
#left{ position:absolute; top:0; left:0; width:200px; height:100%; background-color:#CCCCCC}
#right{ margin-left:200px; height:100%; background-color:#0099FF}
</style>
<div id="left">left</div>
<div id="right">right</div>

這段代碼主要涉及到以下兩點點比較重要的：
（1）相容firefox實現div高度100%；
（2）div絕對位置的妙用；在頁面配置的時候，position:absolute如果靈活的應用，可以達到很好的效果。

方法二 使用float解決div左右布局，左為絕對寬度，右為相對寬度問題
<style type="text/css">
body{ margin:0; height:100% }
html{ height:100% }
#left{ width:150px; height:100%; float:left; _margin-right:-3px; background-color: yellow }
#main{ height:100%; background-color: green }
</style>

<div id="left"></div>
<div id="main"></div>

方法三，代碼如下。方法二可能沒有按照題目要求，但是可以達到一樣的頁面效果。主要是使用了div的float屬性。
<style>
body{ margin:0; height:100%}
html{ height:100%} /*相容firefox的div高度100%*/
#left{ width:200px; height:100%; background-color:#CCCCCC; float:left}
#main{ width:100%; height:100%; background-color:#0099FF}
</style>
<div id="main">
<div id="left">left</div>
Right
</div>