2014-01-08 123 views
0

標記:瀏覽器設置了多少高度?

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <table width="500" border="0"> 
      <tr> 
       <td colspan="2" style="background-color:#FFA500;"> 
        <h1>Main Title of Web Page</h1> 

       </td> 
      </tr> 
      <tr> 
       <td style="background-color:#FFD700;width:100px;"> <b>Menu</b> 
        <br>HTML 
        <br>CSS 
        <br>JavaScript</td> 
       <td style="background-color:#eeeeee;height:200px;width:400px;">Content goes here</td> 
      </tr> 
      <tr> 
       <td colspan="2" style="background-color:#FFA500;text-align:center;">Copyright ? W3Schools.com</td> 
      </tr> 
     </table> 
    </body> 
</html> 

在HTML中,有沒有關於頂線和底線的高度定義。瀏覽器設置了多少高度?因爲每個瀏覽器將用自己的方式表

enter image description here

+0

不要使用表格進行佈局。 – bjb568

+0

按'F12'打開開發人員工具,然後選擇'計算'選項卡。選擇任何元素,它會顯示計算出來的尺寸。 – Abhitalks

+0

如果HTML是在Firefox中,我怎麼能看到這樣的事情在鉻? –

回答

0

使用表格會造成很多問題。您必須重置瀏覽器的默認樣式並手動設置樣式。反而使用它沒有表。現在

<!DOCTYPE html> 
<html> 
    <body> 
    <div id='header'><h1>Main Title of Web Page</h1></div> 
    <div id='sideBar'> 
     <ul> 
     <li>Menu</li> 
     <li>HTML</li> 
     <li>CSS</li> 
     <li>Other</li> 
     </ul> 
    <div id='pageContainer'> 
     <h2>Content goes here</h2> 
    </div> 
    <div id='footer'>Copyright ? W3Schools.com</div> 
    </body> 
</html> 

您可以在CSS樣式它根據自己的需要。

+1

不同瀏覽器如何設置表格的樣式並不是真正的問題。此外,列表,標題,表單元素......的風格也不盡相同。這就是各種各樣的css_reset_文件存在的原因,這些文件包含在自己的css之前,以便擁有共同的外觀。但是你不應該爲非表格數據使用表格。 –

0

要回答最簡單的方式你的問題...瀏覽器根據頁面的內容將視口的尺寸,如果沒有被明確定義... see this

<div>This is atext</div> 

CSS

html, body { 
    /* height:100%; 
    width:100%; */ 
    margin:0; 
    padding:0; 
} 
div { 
    border:1px solid #000; 
} 

一旦產品尺寸已經html,body設置...它佔用的寬度提到see again here

html, body { 
    height:100%; /*defined*/ 
    width:100%; /*defined*/ 
    margin:0; 
    padding:0; 
} 
div { 
    border:1px solid #000; 
} 
相關問題