100% ≠ 100% ?
Experiments: Div Element
Part 1 - Starting Point

This set of experiments use the div element as the Container Block to observe how each Browser controls the Scrollbars of this element (i.e. the height and width calculations used in Scrollbar Control Logic). In order to achieve this, we need to set the overflow property of the Container Block to auto.

To test the waters, let's start with a simplistic page, with a very basic and traditional styling:

C
S
S

html
{background: none #a52a2a;
height: 100%; width: 100%;}

body
{background: none #006700;
height: 100%; width: 100%;
margin: 0; padding: 0;}

#container
{background: none #c7ffff;
height: 300px; width: 400px;
overflow: auto;}

#test
{background: none #fffacd;
height: 100%; width: 100%;}

p
{font-family: sans-serif;
margin-top: 0px; padding: 4px;
font-size: large; font-weight: bold;}

  H
T
M
L

<body>

<div id="container">

<div id="test">

<p>

This is some text....

</p>

</div><!-- test -->

</div><!-- container -->

</body>

This sets the body background color to dark green. A test block - #test, with its background set to light yellow, was inserted inside #container with a background color of light blue. The #container is used for investigation of the behavior of the scrollbars, with its overflow property value set to auto. The height (300px) and width (400px) of the #container has been intentionally specified in absolute values (px), to facilitate calculations and comparisons. These values are arbitrary, but selected to be smaller than those of the Screen (aka Peep-Hole), to avoid any interference from the Browser's Default Scrollbars. It should be noted that, the above styling in CSS also Normalizes the body element (i.e. strips it of its Browser given privilages), as previously discussed in Body Secrets, purely as a "good practice".

IExplorer Mozilla FireFox Netscape Opera

Vertical Integrity

Let's set the width of #test to 600px (i.e. much greater than that of the #container) to force the Horizontal Scrollbar, while experimenting with proportional (%) and absolute (px) values for the height, to observe the behavior of the Vertical Scrollbar.

The Logic Behind....

With the proportional value of height of #test set to 100%, we would expect that #container will be "self-adjusting" to compensate for the presence of the Horizontal Scrollbar, and its Vertical Scrollbar will remain unactivated.

With the absolute value of height of #test set to 300px, (i.e. equal to the height of #container), we would expect that #container will no longer be able to compensate for the presence, and, therefore, its Vertical Scrollbar will be activated.

Starting with the proportional value for the height (i.e. height=100%):

IExplorer Mozilla FireFox Netscape Opera

Observations:


Now, let's change the height of #test to an absolute value equaling that of #container (i.e. height=300px):

IExplorer Mozilla FireFox Netscape Opera

Observations:

Horizontal Integrity

Now, we can parallel the logic behind, and steps of Vertical Integrity testing, starting with original configuration of the test file and by setting the height of #test to 600px (a value much greater than that of the #container) to force the Vertical Scrollbar, while experimenting with proportional (%) and absolute (px) values for the width, to observe the behaviour of the Horizontal Scrollbar.

Again, starting with the proportional value for the width (i.e. width=100%):

IExplorer Mozilla FireFox Netscape Opera

Observations:


Again, let's change the width of #test to an absolute value equaling that of #container (i.e. width=400px):

IExplorer Mozilla FireFox Netscape Opera

Observations:

Where Are We?

Before we rush into analyzing these scarce data and rushing into conclusions, let's note that there are two obvious, but important, inconsistencies and/or discrepencies:

These inconsistencies/discrepencies immediately raises red flags, which strongly indicates that this subjects needs to be explored further. In other words, we need a Sanity Check - a further and deeper investigation. Consequently, a series of experiments were conducted for this purpose, which are further discussed in Part 2 of this article. www.web-zonez.com/screen/100/div/100div2.html

Feed-back & Comments:
Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
Further Reading:
You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,

Web Design & Engineering: Dr. Z
© 2004-2008 Martian Melodies.
All rights reserved.www.Web-ZoneZ.com