overflow-y hides page contents in a webkit browsers (Chrome and Safari)_问答_开发者

overflow-y hides page contents in a webkit browsers (Chrome and Safari)

开发者 https://www.devze.com 2023-02-03 11:16 出处：网络

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 s

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

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%; }

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

You need to close the style attributes with quotation marks