body、html、視口三合一
阿新 • • 發佈：2020-07-24
如果想讓body、html和視口三合一，要讓高度一層一層繼承下來。
pc端下
高度自適應下，PC中html、body設定高是100%，則html、body的height為可視視窗的高，它兩個的高度隨可視視窗高度變化而變化。
如果不設定100%，高度是內容高度和視窗高度較大的一個。
移動端下
移動端下html、body設定高為100%，則高為裝置的高度也就是移動裝置的視口高為定值。
如果不設定100%，高度是內容高度和視窗高度較大的一個。
存在的BUG：
可能高度由內容高決定，在彈性佈局時會導致overflow:scroll設定滾動條失效，因為高度是內容高度，永遠不會超出從而形成滾動條。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html{ margin:30px; border:1px solid red; height: 100%; } body{ margin:30px; border:1px solid black; height: 100%; } </style> </head> <body> <div style="height: 1000px;" > </div> </body> </html>