Home/ Questions/Q 1092137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T23:38:15+00:00

I’m developing an application for measuring and storing running/cycling tracks using OSM/Google Maps integration.

  • 0

I’m developing an application for measuring and storing running/cycling tracks using OSM/Google Maps integration.

I want it to work without any page scrolling, so the page should fill the browser window. Basically it should look as follows:

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

The list of routes is very long and should be forced to show a scrollbar. The toolbar and route statistics should shrink to the minimal needed space. My current HTML test file is this:

<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>

Open that in your browser and you’ll see that the outer div fills the window correctly (horizontally and vertically), but the table inside is bigger than the containing div. What I had expected was that the long list would be scrollable because of overflow: scroll but it doesn’t.

Any ideas or tutorials on how to solve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try putting a div inside the “list of routes” td and make that scrollable instead of the td itself. Go through and make sure nothing has a padding or border. See if setting or removing a doctype changes anything (this is one of those cases where quirks and standards mode act much differently).

    This works for me in 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>
    • 0