HTML適合頁面到屏幕問題

我正在開發一個應用程序，用於使用OSM/Google地圖集成來測量和存儲運行/單車軌道。HTML適合頁面到屏幕問題

我希望它在沒有任何頁面滾動的情況下工作，所以頁面應該填充瀏覽器窗口。基本上它應該如下所示：

+---------------------------------+ 
|  Toolbar with some buttons | 
+---------+-----------------------+ 
| Long ^|      | 
| list ||      | 
| of  ||      | 
| routes v|  Filled   | 
+---------+   with   | 
| Route |  Google   | 
| statis- |   Map   | 
| tics |      | 
+---------------------------------+

路由列表非常長，應該強制顯示滾動條。工具欄和路線統計信息應縮小到最小的需要空間。我現在的HTML測試文件是這樣的：

<html> 
    <body style="width: 100%; height: 100%; border: 0; margin: 0"> 
     <div style="height: 100%; max-height: 100%; border: 4px solid gray"> 
      <table style="width: 100%; height: 100%; border-spacing: 0; border: 3px solid blue"> 
       <tr style="height: 30px"> 
        <td colspan="2"> 
         <div style="border: 2px solid red">Toolbar</div> 
        </td> 
       </tr> 

       <tr> 
        <td style="width: 300px; border: 2px dashed orange; overflow: scroll"> 
         <!-- long list for testing --> 
         left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
         left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
         left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
         left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
        </td> 
        <td rowspan="2" style="border: 2px dashed yellow"> 
         map 
        </td> 
       </tr> 
       <tr> 
        <td style="border: 2px dashed brown"> 
         bottom left 
        </td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

打開，在你的瀏覽器，你會看到，外層div正確（水平和垂直），使窗口，但該表內比包含分區更大。我所期望的是，由於overflow: scroll，長列表將滾動，但事實並非如此。

有關如何解決此問題的任何想法或教程？

來源

2010-09-25 AndiDog

誰downvoting沒有留下評論？ – AndiDog 2010-09-25 18:53:30

嘗試把一個div的TD「的路線清單」內，使可滾動，而不是TD本身。通過並確保沒有填充或邊框。查看設置或刪除文檔類型是否會改變任何內容（這是怪癖和標準模式行爲差異很大的情況之一）。

這在Chrome 6對我的作品：http://jsbin.com/oxaku4/2/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html style="width: 100%; height: 100%; border: 0; margin: 0"> 
    <body style="width: 100%; height: 100%; border: 0; margin: 0"> 
    <table style="width: 100%; height: 100%; border-spacing: 0; border: 3px solid blue"> 

     <tr> 
     <td colspan="2"> 
      <div style="border: 2px solid red">Toolbar</div> 
     </td> 
     </tr> 

     <tr> 
     <td style="width: 300px; border: 2px dashed orange; height:100%;"> 
     <div style="overflow-y:scroll; height:100%;"> 
      <!-- long list for testing --> 
      left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     </div> 
     </td> 
     <td rowspan="2" style="border: 2px dashed yellow;"> 
      map 
     </td> 
     </tr> 

     <tr> 
     <td style="border: 2px dashed brown;"> 
      bottom left <br> 
      some stuff <br> 
      goes here <br> 
     </td> 
     </tr> 

    </table> 
    </body> 
</html>

來源

2010-09-25 19:16:58

好的，這可以防止TD在外部DIV上溢出。但該頁面仍然不適合瀏覽器窗口 - 我不想讓頁面滾動，而只是「路由列表」。在你的示例解決方案中，表不服從'height：100％'，但增長得更高，因此我必須滾動頁面。 – AndiDog 2010-09-25 19:40:43

IE8適合所有瀏覽器窗口，但橙色框（路由列表）顯示爲7像素高。我是否說我討厭HTML？... – AndiDog 2010-09-25 19:56:05

我認爲你處於需要開始處理文檔類型的地步。這個例子在chrome 6中適用於我，可能需要調整才能適用於所有瀏覽器。歡迎來到網絡開發的精彩世界; p – 2010-09-25 20:01:39

-1

我認爲如果你實現的DIV，而不是表的設計，將工作

來源

2010-09-25 18:49:36

你能否提供一個簡單的例子，我不明白它與DIVs正常工作。同樣的問題 - 內部DIV（左側）溢出外部DIV而不是可滾動。 – AndiDog 2010-09-25 18:56:56

HTML適合頁面到屏幕問題

回答

相關問題