CSSHTML實現高度寬度自適應

首先說明 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>