html - 具有第二列响应的固定大小列(列之间的固定边距)

Question

有没有一种方法可以处理以下情况的 2 列布局:

1. 第一列有一个max-width和min-width
2. 第二列有固定的边距(例如 20px)，其余的布局可用空间应该是多少？

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

Answer 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>