有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度(三种方案)
2018-03-01 09:58
585 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度(三种方案)</title> <style type="text/css"> html, body { height: 100%; padding: 0; margin: 0; } /*方案一*/ /*.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; } .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; } .B { height: 100%; background: #D9C666; }*/ /*方案二*/ /*.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; } .A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; } .B { height: 100%; background: #D9C666; }*/ /*方案三*/ .outer { height: 100%; position: relative; } .A { height: 100px; background: #BBE8F2; } .B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; } </style> </head> <body> <div class="outer"> <div class="A"></div> <div class="B"></div> </div> </body> </html>备注:欢迎加入web前端求职招聘qq群:668352707
相关文章推荐
- 有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。
- 两个div,知道其中一个div的高度或宽度,怎么使另一个div占满剩余的部分.
- 上下两个div, 一个固定高度, 另一个铺满屏幕
- DIV嵌套时外层无法自适应高度三种解决方案
- DIV嵌套时外层无法自适应高度三种解决方案
- 三种Div高度自适应的方法
- 三种有效解决DIV高度自适应的方法
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
- div+css 怎么让一个小div在另一个大div里面 垂直居中
- 相邻div实现一个跟着另一个自适应高度示例代码
- 解决div列高度自动适应的三种最常用的方法
- jquery让两个div高度自动适应
- 三种Div高度自适应的方法_前端开发教程
- 三种Div高度自适应的方法
- 相邻div实现一个跟着另一个自适应高度示例代码
- 假如有一个固定高度的div,如何让里面的一个图片垂直居中?
- 创建一个大的DIV,里面的包含两个DIV是可以自由移动
- div+css 怎么让一个小div在另一个大div里面 垂直水平居中
- 一个DIV三列布局100%高度自适应的好例子(国外)
- js实现高度自适应的两个div高度相等