Home/ Questions/Q 9210995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:11:54+00:00

Now this may be extremely simple, but I being new to HTML/CSS, can’t figure

  • 0

Now this may be extremely simple, but I being new to HTML/CSS, can’t figure it out. Here’s the HTML:

<html>
    <body>
        <table>
            <tr>
                <td style="width: 275px;background: gray;overflow: scroll">
                    <div style="height: 1000px;width: 250px; background: green;" />
                </td>
                <td style="width: 620px;background: yellow;">
                    def
                </td>
            </tr>
        </table>
    </body>
</html>

And the CSS:

html,body,table
{
    height: 100%;
    max-height: 500px;
}

What I want is to make this table stretch to full page height; and in case the contents of the left cell are larger than full page height, a simple scrollbar should appear in the left cell to let user scroll through them. But instead, my code makes the whole table larger and the inner scrollbar never appears to work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change your styling a little bit: 

    <td style="width: 275px;background: gray;overflow: scroll; height: 100%">
   <div style="height: 100%;width: 250px; background: green;float: left" id="test" />
</td>
<td style="width: 620px;background: yellow;">
   def
</td>

    and remove max-height like @Allan Kimmer Jensen mentioned in comment

    html,body,table
{
    height: 100%;
}

    Working example

    UPDATE

    add ID to div and bit of javascript:

    <script type="text/javascript">
        function elementHeight(element) {
            var height = 0;
            var body = window.document.body;
            if (window.innerHeight) {
                height = window.innerHeight;
            } else if (body.parentElement.clientHeight) {
                height = body.parentElement.clientHeight;
            } else if (body && body.clientHeight) {
                height = body.clientHeight;
            }
            document.getElementById(element).style.height = height + "px";
        }
        elementHeight('test');
</script>

    updated fiddle

    • 0