1
有一種方法爲具有2列布局,處理條件如下:固定大小柱
- 第一列具有
max-width
,和min-width
- 第二列有一個固定的
margin
(例如20px),並且應該是佈局空閒空間的其餘部分?
這假裝是一個響應式佈局,保留邊距和邊欄之間的定義值。
有一種方法爲具有2列布局,處理條件如下:固定大小柱
max-width
,和min-width
margin
(例如20px),並且應該是佈局空閒空間的其餘部分?這假裝是一個響應式佈局,保留邊距和邊欄之間的定義值。
聽起來你一個div
display: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>