2011-10-24 70 views
2

因此,我已經將此側邊欄作爲表格中的一列與垂直滾動的div進行比較。它在Chrome中運行得很好,但在Firefox中沒有。我已經遍佈網絡尋找解決方案,而且我沒有嘗試過那些解決方案。在Firefox中它忽略了100%的高度,只是把自己壓低了,但我不想那樣。我想讓它滾動。試圖獲得一個div/100%高度和溢出自動在Firefox中工作

這裏就是我有

HTML:

<body> 
     <table class="wrapper"> 
      <tr> 
       <td colspan="2" class="topbar"> 
        Page title 
       </td> 
      </tr> 
      <tr> 
       <td class="sidebar"> 
        <div class="listings"> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
         &nbsp;<br> 
        </div> 
       </td> 
       <td><div id="map_canvas"></div></td> 
      </tr> 
      <tr> 
       <td colspan="2" class="bottom"> 
        hello 
       </td> 
      </tr> 
     </table> 
    </body> 

而這裏的CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
body { line-height: 1; } 
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
table { border-collapse: collapse; border-spacing: 0; } 

html, body { 
    height:100%; /* needed for container min-height */ 
} 

.wrapper { 
    width: 100%; 
    height: 100%; 
} 

.wrapper .topbar { 
    background: #000; 
    color: white; 
    height: 35px; 
} 

.wrapper #map_canvas { 
    background: white; 
    height: 100%; 
    width: 100%; 
} 

.wrapper .sidebar { 
    width: 400px; 
    /*height: 100%;*/ 
    background: white; 
} 

.listings { 
    min-height: 100px; 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    background: grey; 
} 

.wrapper .bottom { 
    background: grey; 
    height: 150px; 
} 

任何幫助是極大的讚賞

+0

噢,我正在使用這種文檔類型:<!DOCTYPE HTML> –

+0

您是否找到解決此問題的解決方案?我遇到同樣的問題。 – Phenix

回答

0

我敢打賭,這是由於表。使用表格來塑造整個頁面並沒有被使用很長時間,並且它是不鼓勵的,它在語義上是錯誤的。

試着把你的div與float:left屬性,彼此相鄰。

+0

感謝您的提示,但我使用的表格在列中保持一致的高度。使用表格是解決我遇到的另一個問題。如果可能的話,我寧願保留桌子。 –

4

請把style =「height:0;」在你想滾動的相應Div的TD中。

+0

O.o。 。 。這個答案應該有180億上漲。關於Stack Overflow有很多問題,這個問題是重複的,這是唯一一個回答我的想法的問題。 – Suamere