最方便的自适应calc

最新推荐文章于 2024-10-13 19:30:05 发布

晋！

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量110

点赞数

文章标签： css

本文链接：https://blog.csdn.net/yangjin0327/article/details/99736973

版权

说明：自适应列的width根据calc()自动计算，如：父容器width - 固定列width。
浏览器支持：IE 9+。
css:

* { margin: 0;padding: 0 }
 
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
 
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
 
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #9dc3e6;
}