今天分享一個height的特性與一個實用的文字編排設定!
一、關於height的百分比
height:100%
如果在一個div設置一張背景圖，並設置width:100% ;hight:100% ，
會發現div的高度根本稱不開。這時需在html，body上設hight:100%，
因為height的百分比值需要父級有一個可以生效的高度值才起作用。
height:100vh
vh(view height)指瀏覽器內部的可視區域高度的百分比，window.innerWidth/window.innerHeight
上述例子問題也可以使用vh單位解決，不用在html，body上設hight:100%
但是vh單位在IE8以下版本不支援。
二、視字數多寡自動居中/齊左對齊
需分二層架構，外層：text-align: center;內層：display: inline-block; text-align: left
當文字少於一行的时候居中顯示，文字超過一行居左顯示
三、 相關連結＆參考內容：
關於第一點.經過我的測試
height:100%無論在 html 或是body設置,對於div都沒效果
1.body height:100%無效,div height:100vh有效
<body class="m:0 h:100%" style="height:100%;margin:0px">
<div class="w:full h:100% bg:red" style="height:100vh;background-color:red">
test
</div>
</body>
2.兩者有效
<body class="m:0 h:100%" style="height:100vh;margin:0px">
<div class="w:full h:100% bg:red" style="height:100%;background-color:red">
test
</div>
</body>
結論 body設100vh
body設100vh 這樣方便子元素
iThome鐵人賽
看影片追技術