flex布局巢狀之高度自適應

查遍各大資源無任何flex巢狀布局的例子，經過自己折騰完成了專案中的高度自適應需求（更多應用於前端元件）

效果圖：

html**：（關鍵地方已經用顏色特別標識 ^_^）

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>flex 巢狀 之 高度自適應
title
>
<
style 
media
="screen"
>
body, html 
.flex 
.item 
.overflow 
.outer 
.contener 
.contener>div
style
>
head
>
<
body
>
<
h1>flex 巢狀布局
h1>
<
div 
class
="flex outer"
>
<
div 
style
="background-color: silver; padding: 10px;"
>外容器 自適應內容的區域 ... ...
div>
<
div 
class
="flex item overflow"
style
="padding: 15px;"
> 
<
div 
class
="flex contener overflow"
>                  
<
div 
style
="background-color: yellow;"
>
<
h3>內容器 - 頭部資訊
h3>
div>
<
div 
class
="item overflow"
>                         
內容溢位滾動部分 
<
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>
內容溢位滾動部分 
<
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>
內容溢位滾動部分 
<
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>內容溢位滾動部分 <
br>
div>
<
div 
style
="background-color: yellow;"
>
<
h3>內容器 - 尾部資訊
h3>
div>
div>
div>
div>
body
>
html
>

flex知識學習小遊戲： 

css布局之高度自適應

方法一 利用絕對定位 乙個元素是絕對定位時，如果沒有給它設定高度或寬度，則它的的高度和寬度是由它的top right bottom left屬性決定的。13 高度自適應，就是同時設定了top和bottom的值。方法二 利用padding實現 1 給父元素留padding top，然後用相對定位，把b...

CSS布局奇淫技巧之 高度自適應

何為高度自適應？高度自適應就是高度能跟隨瀏覽器視窗的大小改變而改變，典型的運用在一些後台介面中上面一欄高度固定用作選單欄或導航欄，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在相容瀏覽器方面也稍微複雜一些。布局思路 在ie7 及chrome firefox等瀏覽器中，高度自適應...

CSS布局奇淫技巧之 高度自適應

css布局奇淫技巧之 高度自適應 何為高度自適應？高度自適應就是高度能跟隨瀏覽器視窗的大小改變而改變，典型的運用在一些後台介面中上面一欄高度固定用作選單欄或導航欄，下面一欄高度自適應用於顯示內容。高度自適應不像寬度自適應那樣簡單，在相容瀏覽器方面也稍微複雜一些。布局思路 在ie7 及chrome f...