固定大小柱

Question

有一種方法爲具有2列布局，處理條件如下：

1. 第一列具有max-width，和min-width
2. 第二列有一個固定的margin（例如20px），並且應該是佈局空閒空間的其餘部分？

這假裝是一個響應式佈局，保留邊距和邊欄之間的定義值。

Answer 1

聽起來你一個divdisplay:table/table-cell佈局後，see here（visual clarity here）

NB。如果你想補充工具欄/內容，堅持100％的高度，增加position:fixed;到body

CSS

body, .viewport{ 
    width:100%; 
    height:100%; 
} 
*{ 
    padding:0; 
    margin:0; 
} 

.viewport{ 
    display:table; 
} 
.sidebar, .content{ 
    display:table-cell; 
    border:1px solid grey; 
} 
.sidebar{ 
    min-width:100px; 
    max-width:300px; 
    width:300px; 
} 
.content{ 
    padding-left:20px; 
} 

HTML

<div class='viewport'> 
    <div class='sidebar'> 
     sidebar 
    </div> 
    <div class='content'> 
     content 
    </div> 
</div>