CSS表格和溢出DIV

我在Firefox中有一個問題，表格單元格和一個溢出自動的DIV。這裏是我的標記：CSS表格和溢出DIV

<div id="container"> 
    <div id="category"> 
     <div id="row"> 
      <div id="refine"> 
        <div class="content"> 
         <!-- contains content --> 
        </div> 
      </div> 
     </div> 
    </div> 
</div>

而CSS：

html, body { 
    height: 100%; 
} 

#container { 
    display: table; 
    height: 100%; 
    width: 500px; 
    max-height: 200px; 
} 

#category { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

#row { 
    display: table-row; 
} 

#refine { 
    display: table-cell; 
    height: 100%; 
} 

.content { 
    float: left; 
    height: 100%; 
    width: 100%; 
    overflow-y: auto; 
} 

.content p { 
    float: left; 
    width: 100%; 
}

我申請容器上的最大高度 - 和所有的子元素有容器的100％的高度。在上面，.content需要可滾動一旦內容超過其父母的最大高度。

在Chrome中，按預期工作 - 滾動條顯示在.content上。然而，在Firefox和IE中，表格單元格簡單地擴展下來 - 它似乎並不考慮容器的最大高度設置。

下面是演示該問題的小提示：http://jsfiddle.net/LpzEM/6/（在Firefox和Chrome中嘗試此操作）。

通過我無法改變網站的基礎結構的方式 - 所以它需要仍然使用顯示錶等

來源

2014-02-27 GSTAR

我認爲firefox與另一個'display：table'內嵌'display：table'直接混淆。另外，我認爲它希望溢出位於具有最大高度集的元素上。像這樣：http：//jsfiddle.net/davidpauljunior/LpzEM/11/ – davidpauljunior

啊，工作，除了我不能在容器上，因爲這意味着整個容器將滾動而不是內部的DIV。 – GSTAR

你可以在內部div上設置最大高度嗎？ – davidpauljunior

嘗試將.content溢出滾動。

.content { 
    // ... 
    overflow-y: scroll; 
}

這在Firefox的JSFiddle中適用於我。

又見http://www.w3schools.com/cssref/pr_pos_overflow.asp

來源

2014-02-27 03:00:53

也請解釋代碼是更有教育意義的。 – lpapp

@LaszloPapp - 同意。我已經添加了一些。 –

好的，謝謝。我不是downvoter fwiw。我剛剛給了+1。 – lpapp

試試下面的代碼..它適用於瀏覽器，Firefox和最新的IE瀏覽器。在舊的Internet Explorer中，它不支持一些CSS功能。

<style> 
html, body { 
    height: 100%; 
} 

#container { 
display: block; 
width: 500px; 
max-height: 200px; 
overflow: scroll; 
} 

#category { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

#row { 
    display: table-row; 
} 

#refine { 
    display: table-cell; 
    height: 100%; 
} 

.content { 
    float: left; 
    height: 100%; 
    width: 100%; 
} 

.content p { 
    float: left; 
    width: 100%; 
} 
</style> 
<div id="container"> 
    <div id="category"> 
     <div id="row"> 
      <div id="refine"> 
        <div class="content"> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p><p>Lorem iPsum</p> 
         <p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
         <p>Lorem iPsum</p><p>Lorem iPsum</p> 
         <p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p><p>Lorem iPsum</p> 
         <p>Lorem iPsum</p> 
        </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2014-02-27 05:00:57

抱歉，我無法在容器上滾動滾動條。 – GSTAR

CSS表格和溢出DIV

回答

相關問題