子div自适应父级元素剩余空间

最新推荐文章于 2022-04-17 10:14:11 发布

weixin_33795093

最新推荐文章于 2022-04-17 10:14:11 发布

阅读量1k

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2449363/blog/1554315

版权

2019独角兽企业重金招聘Python工程师标准>>>

以如下问题为例，给出两种解决方案：

问题：一个div占据浏览器整个视窗，内部一div宽高固定时，如何实现另一内部div自适应剩余空间？

方案一：（box-sizing:border-box）

.farther-panel {
    width: 100%;
    height: 100%;
    padding: 100px 0 0;
    background-color: red;
    box-sizing: border-box;
}

.farther-panel .childA-cls {
    width: 100px;
    height: 100px;
    margin: -100px 0 0;
    background: blue;
}

.farther-panel .childB-cls {
    width: 100%;
    height: 100%;
    background: green;
    overflow-y: auto;
}

方案二：（box-sizing:border-box + position:absolute）

.farther-panel {
    width: 100%;
    height: 100%;
    padding: 100px 0 0;
    box-sizing: border-box;
    position: relative;
    background: red;
}

.farther-panel .childA-cls {
    width: 100%;
    height: 100px;
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
}

.farther-panel .childB-cls {
    width: 100%;
    height: 100%;
    background: green;