首先说明 auto 和 100%是不一样的,100%是根据元素的像素有关的,auto是自动的。
举个例子:给box下添加一个div高度是100%,这时候div高度为box高度300px,
这时候如果给这个div设置padding,那么这个div的高度等于box的高度+padding的像素之和。
再说一个知识点:
正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的高度宽度都是内容撑开的高度宽度；
设置绝对定位/固定定位/浮动会脱离文档流；
脱离文档流下,块级元素的宽度是内容撑开的元素,高度还是内容撑开的高度；
给内联元素设置绝对定位/固定定位/浮动,内联元素就会有块元素的特点。
<div class="box">
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="main"></div>
</div>
</div>
第一种使用:width: auto;overflow: hidden
<style>
*{margin: 0;padding: 0;}
.box{width:300px;height:300px;position: relative;margin: 20px auto;}
.header{height: 100px;width: 100%;background: #FF0000;}
.content{position: absolute;top:100px;bottom: 0;background: yellow;height: auto;width: 100%;}
.left{float: left;height: 100%;width: 100px;background: aqua;}
.main{background: green;overflow: hidden;width: auto;;height: 100%;}
</style>
第二种使用: width: 100%;padding;box-sizing: border-box;
<style>
*{margin: 0;padding: 0;}
.box{width:300px;height:300px;position: relative;margin: 20px auto;}
.header{height: 100px;width: 100%;background: #FF0000;}
.content{position: absolute;top:100px;bottom: 0;background: yellow;height: auto;width: 100%;}
.left{float: left;height: 100%;width: 100px;background: aqua;}
/* .main{background: green;width: auto;height: 100%;padding-left: 100px;} */
/* 这种情况,宽度是auto就会自己适应 */
.main{background: green;width: 100%;height: 100%;padding-left: 100px;box-sizing: border-box;}
/* 这个时候width是100%,是相对于父元素的宽度,padding-left属性就会是宽度多出100px,这时候就需要设置box-sizing: border-box;的作用是把padding往里加,不会改变宽度. */
</style>