之前面试遇到过一个笔试题，大概意思：

页面有两个水平对齐的div，其中一个宽为100px,另一个根据浏览器窗口自动铺满

有两个办法可以实现，css3中的calc计算和flex布局

calc计算

右侧div的width = 父元素的宽度 - 100px
代码如下

<div class="container">
    <div class="fix"></div>
    <div class="auto"></div>
</div>

*{
    box-sizing: border-box;  
}
div {
    border: 1px solid;
    height: 100px;  /* 方便显示 */
}
.container > * {
    float: left; /* 水平排列 */
}

/* 左div */
.fix {
    width: 100px;
}

/* 右div */
.auto {
    width: calc(100% - 100px); /* 这里的百分比值是相对父元素的，假设父元素宽是1000px，width = (1000 - 100); */
    border: 1px solid red;
}

flex布局

主要是利用flex属性分配剩余空间
代码如下

<div class="container">
    <div class="fix"></div>
    <div class="auto"></div>
</div>

div {
    height: 100px;
    border: 1px solid;
}
.container {
    display: flex;
}
.fix {
    width: 100px;
}
.auto {
    flex: 1;  /* 主要是这里 */
    border: 1px solid red;
}

w3c flex布局传送门flex布局

padding + position

div {
    height: 100px;
    border: 1px solid;
}
.container {
    position: relative;
}
.fix {
    width: 100px;
    position: absolute;
    left: 0;
    top: 0;
}
.auto {
    padding-left: 100px;
    border: 1px solid red;
    box-sizing: border-box;
}

<div class="container">
    <div class="fix"></div>
    <div class="auto"></div>
</div>