2欄100％佈局 - 1個固定柱和1分動態列

基本上，容器是具有100％的寬度（即，其將填充整個頁面的），它會具有兩列：2欄100％佈局 - 1個固定柱和1分動態列

第1列是導航欄，應保持固定寬度，例如200像素
列2是內容領域，應當有沒有具體的寬度 - 它應該只是填充剩餘的區域，並調整根據屏幕/窗口尺寸，

什麼是實現這一目標的最佳方式是什麼？

XHTML：

<body> 
    <div id="container"> 
     <div id="navbar"> 
      &nbsp; 
     </div> 

     <div id="content"> 
      &nbsp; 
     </div> 
    </div> 
</body>

CSS：

#container { float: left; width: 100%; } 
#navbar { float: left; width: 200px; height: 800px; } 
#content { float: left; height: 800px; ??? }

來源

2012-03-11 GSTAR

見[此]（http://www.dynamicdrive.com/style/layouts/category/C9/） – dotoree 2012-03-11 17:49:27

我會做到這一點是設置在容器和內容div的最小寬度，對內容的div左邊距的方式，允許它在導航div旁邊滑動。左邊距加上最小寬度應等於容器的最小寬度。我已經添加了邊框，因此您可以看到它的尺寸正確。

#container 
{ 
    width: 100%; 
    min-width: 960px; 
} 

#nav 
{ 
    float: left; 
    width: 200px; 
    height: 100%; 
    min-height: 800px; 
    border: 1px solid #ff0000; 
} 

#content 
{ 
    margin-left: 205px; 
    min-width: 755px; 
    height: 100%; 
    min-height: 800px; 
    border: 1px solid #0000ff; 
}

小提琴在http://jsfiddle.net/bmMTW/

來源

2012-03-11 18:03:10 tvanfosson

2欄100％佈局 - 1個固定柱和1分動態列

回答

相關問題