固定大小的列，第二列响应（列之间的固定边距）

Question

有没有办法让2列布局处理以下条件：

1. 第一列有max-width和min-width
2. 第二列有一个固定的margin（例如20px），它应该是布局可用空间的其余部分吗？

这假装是一个响应式布局，可以在定义的值之间保留边距和侧边栏。

Answer 1

听起来像是在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>