<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      如何處理html、body元的高度問題
                
                  發表時間：2023-08-27             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]本篇文章給大家帶來的內容是關于如何解決html、body元素的高度問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。首先：html元素和body元素均為塊級元素。簡述：有時我們會發現未設置height: 100%，html、body元素的高度卻為當前窗口的高度，看上去像是設置了h...
      本篇文章給大家帶來的內容是關于如何解決html、body元素的高度問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
      微信截圖_20181123154452.png
      首先：html元素和body元素均為塊級元素。
      簡述：有時我們會發現未設置height: 100%，html、body元素的高度卻為當前窗口的高度，看上去像是設置了height: 100%。
      看下面兩個例子：
      例1：
      <html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
height: 30%;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
      此時的container的高度為窗口高度的30%，html、body元素的高度均為窗口的高度。
      例2：
      <!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      height: 30%;
    }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>
      此時container的高度為0，設置的height: 30%并未生效，html、body元素的高度均為0。
      原因：例1未設置當前文檔類型，默認啟用兼容模式，兼容模式下的html、body元素的高度即為窗口的高度，而例2設置了<!DOCTYPE html>，啟用標準模式，而標準模式下的html、body元素的高度均為0。
      以上就是對如何解決html、body元素的高度問題的全部介紹，如果您想了解更多有關Html5教程，請關注PHP中文網。
      以上就是如何解決html、body元的高度問題的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清