首頁 > 開發者 > 網站開發

前端小知識:為什麼你寫的 height:100% 不起作用？，小知識height

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前端小知識:為什麼你寫的 height:100% 不起作用？，小知識height

（點擊上方公眾號，可快速關注）

作者：JiaXinYi

https://segmentfault.com/a/1190000012707337


這個知識不算冷門的，但是用的時候可能還是會有些懵逼，不能生效時搜一搜就能找到答案了，但是你真的懂了嗎？為什麼想要設定一個全屏元素的時候，高度不受%的控制？

1.百分比寬高的設定

按照w3c中的width和height屬性，可以明確%設定寬高是根據父元素的寬高來的：

http://www.w3school.com.cn/cssref/prdimwidth.asp

http://www.w3school.com.cn/cssref/prdimheight.asp

2.width:100%;

我們寫下這樣一段代碼，隨意設定一個背景色便於觀察元素

 
    
  
  1. <body>
    2. 
  
  2.     <div style="width:100%;height:100%;background-color:blueviolet;">
    3. 
  
  3.     width:100%;height:100%;
    4. 
  
  4.     </div>
    5. 
  
  5. </body>
    6. 
  
  6. //寬100%，我們現在看到的高是屬於font-size的，而不是100%；
    7. 
 


 
    
  

    2. 
  
  2. <body>
    3. 
  
  3.     <div style="width:100%;height:200px;background-color:blueviolet;">
    4. 
  
  4.     width:100%;height:200px;
    5. 
  
  5.     </div>
    6. 
  
  6. </body>
    7. 
  
  7. //效果如下
    8.


可以看到基本上寬的100%很容易就實現的，但是這裡的height卻不能設定成%比的（該元素會消失看不見），這是為什麼呢？

3.瀏覽器是如何計算高度和寬度的

Web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何預設值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。即我們不設定寬，會自動填滿整個橫向寬度，如下：

 
    
  
  1. <div style="height:100%;">height:100%;</div>  
    2.


但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致捲軸出現)。或者你給整個版面設定一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。

因為頁面並沒有預設的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據擷取父元素的高度，也就無法計算自己的高度。

即父元素的高度只是一個預設值：height: auto;我們設定height：100%時，是要求瀏覽器根據這樣一個預設值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。

各個瀏覽器對於寬高的解析也不相同，大家可以自己搜尋一下。

參考：http://www.webhek.com/post/css-100-percent-height.html

4.如何解決

現在你知道了吧，%是一個相對父元素計算得來的高度，要想使他有效，我們需要設定父元素的height;

要特別注意的一點是，在之中的元素的父元素並不僅僅只是，還包括了。

所以我們要同時設定這兩者的height，只設定其中一個是不行的：

 
    
  
  1.         html,body{
    2. 
  
  2.             height: 100%;
    3. 
  
  3.             margin: 0;
    4. 
  
  4.             padding: 0;
    5. 
  
  5.         }
    6.


5.關於line-height置中的一點誤解？ 
 
    
  
  1. <!DOCTYPE html>
    2. 
  
  2. <html lang="en">
    3. 
  
    4. 
  
  4. <head>
    5. 
  
  5.     <meta charset="UTF-8">
    6. 
  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 
  
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8. 
  
  8.     <title>Document</title>
    9. 
  
  9.     <style>
    10. 
  
  10.         html,body{
    11. 
  
  11.             height: 100%;
    12. 
  
  12.             margin: 0;
    13. 
  
  13.             padding: 0;
    14. 
  
  14.         }
    15. 
  
  15.         div {
    16. 
  
  16.             color: white;
    17. 
  
  17.             text-align: center;
    18. 
  
  18.             font-size: 30px;
    19. 
  
  19.             line-height: 100%;
    20. 
  
  20.             background-color: blueviolet;
    21. 
  
  21.         }
    22. 
  
  22.     </style>
    23. 
  
  23. </head>
    24. 
  
    25. 
  
  25. <body>
    26. 
  
  26.     <!-- <div >width:100%;height:100%;</div> -->
    27. 
  
  27.     <div style="height:100%;">height:100%;</div>
    28. 
  
  28.     <!-- <div >width:100%;height:200px;</div> -->
    29. 
  
  29. </body>
    30. 
  
    31. 
  
  31. </html>
    32.

全部代碼如上，可以看到設定了line-height為100%沒有置中，這是為什麼呢，因為這時候的%是相對於字型尺寸的？所以直接作用於沒有絕對高度的元素是不行的。

line-height屬性說明：http://www.w3school.com.cn/cssref/prdimline-height.asp

這時候要想置中，可以如下，做一個div嵌套，一個負責高度，一個負責置中，雖然感覺並不會這樣用到，但是置中還是很靈驗的~

 
    
  
  1. <!DOCTYPE html>
    2. 
  
  2. <html lang="en">
    3. 
  
    4. 
  
  4. <head>
    5. 
  
  5.     <meta charset="UTF-8">
    6. 
  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 
  
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8. 
  
  8.     <title>Document</title>
    9. 
  
  9.     <style>
    10. 
  
  10.         html,
    11. 
  
  11.         body {
    12. 
  
  12.             height: 100%;
    13. 
  
  13.             margin: 0;
    14. 
  
  14.             padding: 0;
    15. 
  
  15.         }
    16. 
  
    17. 
  
  17.         .div1 {
    18. 
  
  18.             background-color: blueviolet;
    19. 
  
  19.             position: relative;
    20. 
  
  20.         }
    21. 
  
    22. 
  
  22.         .div2 {
    23. 
  
  23.             font-size: 30px;    
    24. 
  
  24.             color: white;
    25. 
  
  25.             text-align: center;                    
    26. 
  
  26.             width: 400px;
    27. 
  
  27.             position: absolute;
    28. 
  
  28.             left: 50%;
    29. 
  
  29.             top: 50%;
    30. 
  
  30.             transform: translateX(-50%)  translateY(-50%);
    31. 
  
  31.         }
    32. 
  
  32.     </style>
    33. 
  
  33. </head>
    34. 
  
    35. 
  
  35. <body>
    36. 
  
  36.     <!-- <div >width:100%;height:100%;</div> -->
    37. 
  
  37.     <div style="height:100%;" class="div1">
    38. 
  
  38.         <div class="div2">height:100%;</div>
    39. 
  
  39.     </div>
    40. 
  
  40.     <!-- <div >width:100%;height:200px;</div> -->
    41. 
  
  41. </body>
    42. 
  
    43. 
  
  43. </html>
    44.


6.源碼

https://github.com/JiaXinYi/ife-study/blob/master/height/height.html


覺得本文對你有協助？請分享給更多人

關注「前端大全」，提升前端技能

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
alto height height format font height arc height gd height height photo ru height
相關文章
自學成才的秘密：115個 web Develop 資源_經典網摘
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型
SVN提示https認證驗證失敗問題svn: E230001: Server SSL certificate verifi...
JS如何判斷文字是全形還是半形（轉載）
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More