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

嗣水流年
  • 37

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

回复
阅读 11.9k
4 个回答
vczhan
  • 2.6k
✓ 已被采纳
Humphry
  • 16.4k

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

如果是外层div自适应于它的父级,纯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+。

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

宣传栏