最近在百度 IFE 训练营中看见的一道题目： 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路： 通过绝对定位实现 See the Pen absolute-two-column ...

利用bfc：右边盒子触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。 效果如图 补充一下： 　　BFC翻译过来是块级格式化上下文，和haslayout比较相似，但haslayout是旧版本IE下的一个专有属性，表示元素自己对自身的内容进行组织和计算。BFC ...

html: <div class="container"> 　　<div class="left"> 　　　　left固定宽度200px 　　</div> 　　<div class="right"> 　　</div> ...

（1）使用float -------------------------------------------------------------------------- ...

样式： <style type="text/css"> 　　html,body { height: 100%; padding: 0; margin: 0; } 　　.outer { height: 100%; box-sizing: border-box ...

html 公用css: 1 利用css3 flex css： 2 左边浮动 3 左右都浮动 使用calc计算右边的宽度 使用css3 flex，还可以实现，左边的高度随右边的高度而变化； ...

需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条 2. 绿色部分高度固定，比如50px 3. 紫色部分填充剩余的高度 HTML结构暂且如下： 样式如下： 最重要的部分： 重点是要top和bottom一起使用，这是 ...

需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条 2. 绿色部分高度固定，比如50px 3. 紫色部分填充剩余的高度 HTML结构： 需求1实现： 需求2实现： 需求3实现（绝对布局+top(nav ...