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

【问题标题】：fixed size column with a second column responsive (fixed margin between columns)固定大小的列，第二列响应（列之间的固定边距）
【发布时间】：2017-02-19 09:28:00
【问题描述】：

有没有办法让 2 列布局处理以下情况：

第一列有max-width和min-width
第二列有一个固定的margin（例如20px），应该是剩下的布局空闲空间吗？

这伪装成一个响应式布局，在定义的值之间保持边距和边栏。

【问题讨论】：

标签： html css layout less

【解决方案1】：

听起来你在使用div display:table/table-cell 布局，see here (visual clarity here)

注意。如果您希望侧边栏/内容保持 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>

【讨论】：