MozTW 討論區
https://forum.moztw.org/

請問 Firefox 使用 css - div 會出現 scroll bar 的問題
https://forum.moztw.org/viewtopic.php?f=13&t=14015
1 頁 (共 1 頁)

發表人:  samgw [ 2006-05-05, 17:28 ]
文章主題 :  請問 Firefox 使用 css - div 會出現 scroll bar 的問題

小弟想請問一個問題,

為什麼下面的 HTML 會在 Firefox 中產生 vertical scroll bar ?
而當我在 <div>..</div> 的區塊前面加上任何一字元, vertical scroll bar 就會消失.

這個地方實在很奇怪,希望大家能夠幫我解惑一下,謝謝! :)

代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
   <head>

      <style type="text/css">
         <!--         
         
         html {
         height:100%;
/*         border : thick solid red;*/
         }
         body {
         margin: 0;
         padding: 0;
         height: 100%;
         width: 100%;
         text-align:center;
/*         border : thick solid #000000;*/
         }
         .container{
         margin-top:15px;
         
         }
         -->
      </style>
      
      <title></title>

      
   </head>
   <body>

   <div class="container">
      I am in div
   </div>
</body>
</html>

發表人:  danielwang [ 2006-05-05, 21:56 ]
文章主題 : 

隨便猜的,把 100% 的東西都拿掉看看

發表人:  李某人 [ 2006-05-06, 19:50 ]
文章主題 : 

沒測試過, 我純粹說說而已...

首先你這段 CSS 讓 BODY 的 height 變得跟 HTML 一樣了...
然後 BODY 裡面的 div.container 又有 15px 的 top margin...
這時 div 的 top margin 會 collapse 掉, 變成了 body 的 top margin (粗略說)...
這樣 body 在垂直面上所佔的空間 (100% + 15px) 會大於 html 的 (100%), 所以會出現 scrollbar...

但如果你在 div 前加入什麼的話, body 的 top edge 跟 div.container 的 top margin edge 接觸不到, 不會出現 margin collapsing 的現象, html 的空間夠 body 用就不會出現 scrollbar 了...

發表人:  samgw [ 2006-05-08, 14:34 ]
文章主題 : 

感謝李某人與danielwang,
點出關鍵點出來,小弟查了一下,
的確很有可能是因為 collapsing vertical margins 的關係。 :D

長知識,長知識

發表人:  訪客 [ 2006-07-21, 16:35 ]
文章主題 : 

samgw 寫:
小弟想請問一個問題,

為什麼下面的 HTML 會在 Firefox 中產生 vertical scroll bar ?
而當我在 <div>..</div> 的區塊前面加上任何一字元, vertical scroll bar 就會消失.

這個地方實在很奇怪,希望大家能夠幫我解惑一下,謝謝! :)

代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
   <head>

      <style type="text/css">
         <!--         
         
         html {
         height:100%;
/*         border : thick solid red;*/
         }
         body {
         margin: 0;
         padding: 0;
         height: 100%;
         width: 100%;
         text-align:center;
/*         border : thick solid #000000;*/
         }
         .container{
         margin-top:15px;
         
         }
         -->
      </style>
      
      <title></title>

      
   </head>
   <body>

   <div class="container">
      I am in div
   </div>
</body>
</html>

1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/