Welcome to Neudesic Blogs Sign in | Join | Help

100% Height in Opera 8.02 or later

Users of the Opera browser may have been unpleasantly surprised after upgrading to version 8.02 or later. Some web-sites suddenly shrunk up and wouldn't fill the screen anymore. These web-sites used elements with an attribute Height=100% to control the layout. The description of this problem appears all over the Internet, sometimes in rather strong words:

http://techpatterns.com/forums/about537.html

It has caused a lot of grief to the developers. Some people claimed they had a solution but it still didn't work for me. There is a way to make it work and the workaround is quite simple. Opera didn't stop supporting 100% height attribute on the tables. It still works. However, it is not 100% of the screen height. It is 100% of the height of the containter element. The outmost container is the page itself and some people were able to fix the problem by setting the Height on the <body> tag to 100%. However in ASP.NET there is also a <form> element, which is usually the outermost HTML element on the page. And Opera has changed the way it treats the size of the <form> element. Since it is not a visual element, it is logical that it doesn't have the Height attribute and doesn't have size. It used to be like that. However it is treated as a visual element with some default height in the new versions of Opera and upcoming version 9.0 available as CTP is no exception. Since it doesn't have the Height attribute, we can use the style attribute to set its height to 100%:

<form id="Form1" method="post" runat="server" style="height:100%">

Now the outermost container on the page will fill the page and the table inside the form will also stretch to 100% of the page.

Published Tuesday, April 18, 2006 9:50 PM by Michael Morozov

Comments

No Comments

Anonymous comments are disabled