javascript - 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

Question

如题，求三种解法，希望各位大神能详细说明下。

Answer 1

三、flex
http://jsfiddle.net/uqevaprx/

四、pisition
http://jsfiddle.net/uqevaprx/1/

Answer 2

如果外层p高度自适应于内部，就完全不需要额外写规则了，另外一个p绝对能撑高外层p，填得紧紧实实的。

如果是外层p自适应于它的父级，纯CSS的办法是有的。

为了方便演示，下面的demo都让外层元素100%适应于html和body，点Edit in JSFiddle之后可以看到，拖动窗口高度，均能自适应。

box-sizing方案

1. 外层box-sizing: border-box; 同时设置padding: 100px 0 0；
2. 内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；
3. 另一个元素直接height: 100%;

这就是两个方案了:

http://jsfiddle.net/xq4rew3f/1/

http://jsfiddle.net/xq4rew3f/3/

absolute positioning

1. 外层position: relative；
2. 百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0

第三个方案：

http://jsfiddle.net/xq4rew3f/5/

---

注意一下，这三个方案都是IE8+。

Answer 3

一、 height: calc(100%-100px);
二、 JS计算

Answer 4

为了演示方便 外面的p 暂时高度设置为400px 其实多少无所谓
dome
http://jsbin.com/yidilo/1/edit?html,css,output