浮動左/右在窗口調整大小的差距

Question

在我的網站上，我有三個divs，一個標題，一個主要內容和一個側欄在右側。 側邊欄是實際的問題。我希望側欄始終粘貼在瀏覽器窗口的右側，如果用戶調整窗口大小以使其寬度低於主側欄和側欄，則側欄停在主內容的左側邊緣。

當用戶首次訪問網頁並在Mac上至少按下「綠色，最大化窗口按鈕」時，窗口應該調整大小，以便主內容和邊欄無邊距放置。

隨着我的代碼一切正常，除了當我調整窗口的最小寬度可能，然後按最大化窗口按鈕時，兩個div之間有一個16px的差距。

我的代碼：

HTML：

<div id="header">Header</div> 
    <div id="container">   
     <div id="main"> 
     <p> Left </p> 
     </div> 

     <div id="sidebar"> 
     <p> Right </p> 
     </div> 
    </div> 

CSS：

body{ 
margin:0 0; 
min-width:606px; 
} 

#header { 
    padding:5px 10px; 
    background:#00FF00; 
    height:100px; 
} 

#container{ 
    min-width: 865px; 
    min-height: 50px; 
} 

#main { 
    float:left; 
    min-width: 622px; 
    background:#FF0000; 
} 

#sidebar { 
    float:right; 
    width:243px; 
    min-height: 50px; 
    background:#0000FF; 
    margin-bottom: -20px; 
} 

Answer 1

參考：jsFiddle（在地址欄，刪除/show/訪問的jsfiddle編輯頁面。）

而不是處理float您的佈局，使用table和table-cell它允許您的目標實現。在XP機器上測試並使用Firefox，Chrome，IE8。

HTML：

<div id="header">Header</div> 

<div id="container">   

    <div id="main"> 
     <p>Main</p> 
    </div> 

    <div id="sidebar"> 
     <p>Sidebar</p> 
    </div> 

</div> 

CSS：

body{ 
    margin: 0 auto; 
    padding: 0; 
} 

#header { 
    background: green; 
    height: 100px; 
    min-width: 865px;   /* Optional: This size is the same as #container width. */ 
} 

#container{ 
    display: table; 
    width: 100%; 
    min-width: 865px; 
    height: 50px; 
} 

#main { 
    display: table-cell; 
    /*min-width: 622px;*/  /* Not needed since #container min-width less #sidebar width will use remainder percentage space (since #container is set at 100%) */ 
    height: 100%;    /* Maximum height is set via #container height */ 
    background: red; 
} 

#sidebar { 
    display: table-cell; 
    width: 243px;   /* The fixed width of the sidebar */ 
    height: 100%;   /* Maximum height is set via #container height */ 
    background: aqua; 
}