Home/ Questions/Q 3671890
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T02:32:32+00:00

I am currently making our website to be supported by all major browsers and

  • 0

I am currently making our website to be supported by all major browsers and I’ve met a very strange problem – oveflow-y attribute caused my data to be hidden. Below I’ve got an oversimplified code sample that works in IE and Firfox, but which doesn’t work in Safari and Chrome. This is a 100% valid code and I am not sure why it doesn’t display properly in webkit browsers. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
</head>

<body style="height: 100%;">

<form action="Webkit_Problem.html" style="height: 100%;">
<table style="height: 100%;">
    <tr>
        <td>
            <div style="overflow-y: auto; height: 100%;">
                THIS SHOULD BE VISIBLE
            </div>
        </td>
    </tr>
</table>
</form>
</body>
</html>

http://www.alocet.com/VictorsTestFolder/Webkit_Problem.html (Live sample here)

The only way to get it working is either remove the height:100% attributes for div or a table tag (which will ruin the purpose of my html), or add height:100% to html tag

Does anyone has any suggestions?

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue is that when you use height: 100%;, it sets your element height relative to its parent. This means that if your parent element does not have a height set, it will be automatically 0px height, or only the height of your content.

    In order for your code to work, you need to set both the body and html to 100% height:

    html, body{ height:100%; }
    • 0