All geek questions in one place

Overflow-y hides page content in webkit browsers (Chrome and Safari)

Currently, I support our website support with all major browsers, and I have encountered a very strange problem - the oveflow-y attribute made my data hidden. The following is an example of simplified code that works in IE and Firfox, but which does not work in Safari and Chrome. This is 100% valid code, and I'm not sure why it does not display correctly 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 example here)

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

Does anyone have any suggestions?

thanks

+4
source share
2 answers

The problem is that when using height: 100%; it sets the height of the element relative to the parent element. This means that if your parent does not have a fixed height, it will automatically be 0px height or just the height of your content.

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

 html, body{ height:100%; }
+3
source 
 <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 quotes

0
source

Source: https://habr.com/ru/post/1334570/

More articles:


All Articles