求css左侧宽度固定右侧宽度自适应的办法

最新推荐文章于 2021-08-19 15:23:28 发布

dshdxch

最新推荐文章于 2021-08-19 15:23:28 发布

阅读量347

点赞数

分类专栏：其它

其它专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<style type="text/css">
html, body {margin: 0;padding: 0;}
.all{ width:100%; height:100%;}
.left{ width:100px; float:left; background:#990; height:100%;margin-left: -100%;}
.right{ width:100%; background:#F90; height:100%; float:left;}
.right_in{ margin-left:100px; height:100%; }
</style>

<div class="all">
    <div class="right">
        <div class="right_in"> 内容</div>
    </div>
    <div class="left">我是固定的</div>
</div>

这样就可以让右侧的宽度自适应，左侧的宽度固定。


原理：

先让右侧的宽度定义为100%；里面的right_in的左边距等于左边固定宽度的尺寸.