ElementUI的Container 佈局容器使用心得

Container 佈局容器
用於佈局的容器組件，方便快速搭建頁面的基本結構：

<el-container>：外層容器。當子元素中包含 <el-header> 或 <el-footer> 時，全部子元素會垂直上下排列，否則會水平左右排列。

<el-header>：頂欄容器。

<el-aside>：側邊欄容器。

<el-main>：主要區域容器。

<el-footer>：底欄容器。

以上組件採用了 flex 佈局，使用前請確定目標瀏覽器是否兼容。此外，
的子元素只能是後四者，後四者的父元素也只能是 。

常見使用情況

頭部固定，中間內容滾動

示例代碼：

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>

<style>
    .el-container {
   	 	/*height: 100%; 可以固定頭部*/
  		/*height: auto; 頭部會跟隨滾動*/
    	height: 100%;
	}
</style>