兩個全屏浮動邊框

Question

我正在設計一個網站，有兩個浮動列，我想填滿整個屏幕。

#column_main{ 
     position:relative; 
     background:#ffffff; 
     float:left; 
     width:70%; 
     height:auto; 
     min-height:550px; 
} 
#column_side{ 
    position:relative; 
    background:#dbdada; 
    float:left; 
    width:30%; 
    height:auto; 
    min-height:550px; 
} 

如果我有界線之下#column_main

border-left:solid 1px #c0c1c4; 

浮食堂和他們並排不再側。

在IE中，我已經能夠通過將#column_main寬度設置爲auto來解決問題，並且它填充了頁面的其餘部分。這在firefox中不起作用，我試着稍微減少這個百分比，但是在#column_main和頁面的右邊緣之間留下了空隙。有沒有辦法讓左邊的1px邊框，並使浮動填充屏幕的其餘部分。

Answer 1

浮動不再起作用，因爲盒模型，其中的邊界被添加到寬度，而不是包含在寬度，你已經做寬用盡100％的寬度的70％和寬度：30％ 。

如果你打算申請您可能希望將它應用到子元素內包裝飄來的一列，並使用這些父列僅作爲網格系統來構建你的其他內容的邊框。

或者嘗試bootstrap grids

Answer 2

添加box-sizing: border-box;到#column_main

這個屬性基本上是說你想箱尺寸適用於它裏面的邊界和一切。

This blog post解釋這一點，和一些其他的選擇來解決這方面的問題。