實作一個自适應布局--網易課堂
<img src="https://img-blog.csdn.net/20150615094052209?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzIxNzA3MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
代碼如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>css-布局-自适應布局</title>
<meta name="xiaowei" content="[email protected]">
<style type="text/css">
html,body{margin:0; padding:0; text-align:center;}
.side{background-color:red;}
.main{background-color:blue;}
html,body{height:100%;}
/*方法一*/
/* .parent{height:100%;display:flex;flex:1;}
.side{width:200px;}
.main{margin-left:10px;flex:1;}*/
/*方法二*/
/*.parent{height:100%; }
.side{width:200px; float:left; height:100%;}
.main{margin-left:210px; height:100%;}*/
/*清除浮動，後續元素不受浮動的影響*/
.clearfix:after{content:".";display:block;clear:both;height:0;
overflow:hidden;visibility:hidden;}
/*方法三*/
.parent{}
.side{position:absolute; width:200px; height:100%;}
.main{position:absolute; top:0; right:0; left:210px; bottom:0; height:100%;}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="side">側欄</div>
<div class="main">主欄</div>
</div>
</body>
</html>
![關于:first-child的誤區[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)