之前面试遇到过一个笔试题，大概意思：
页面有两个水平对齐的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>
