CSS系列——定位应用
2019-12-27 本文已影响0人
Java架构师CAT
上面效果中浏览器不会出现滚动条
2、两种解决方案的具体代码
第一种解决方案：利用绝对定位解决
<!doctype html> *{padding:0;margin:0; }.left{position: absolute;top:0px;left:0;bottom:0;width:300px;background:#f00; }.right{position: absolute;top:0px;right:0;bottom:0;left:300px;background:#0f0; }
第二种解决方案：利用浮动以及计算属性（calc）解决
<!doctype html> *{padding:0;margin:0; }html,body{height:100%; }.clearfix{height:100%; }.clearfix:after{display: block;content:"";clear: both; }.left{float: left;width:300px;background:#f00;height:100%; }.right{float: right;background:#0f0;height:100%;width:calc(100% - 300px); }
