JavaScript Cookbook

Chapter 13. Working with Web Page Spaces

13.0. Introduction

The web page space is all of the area contained within the browser’s chrome: the outer edge of the browser, status, and menu bars. If the contents of the page are larger than the window area, vertical and horizontal scrollbars are added so you can scroll to see all of the page contents.

The web page size is determined by the page elements, in combination with the default and explicit styling for each. If there are no elements, or the elements don’t participate in the page flow (if they’re absolutely positioned, or in some other way removed from the flow), the area of the web page space is the size of the window minus the chrome.

Element sizes vary, based on their contents, but they can be resized or even clipped. If they are resized, setting the element’s overflow alters what happens to their content if it is larger than the element’s size. If the overflow is set to scroll, vertical and horizontal scrollbars are added to the element.

How the elements impact page flow is based on a number of factors. For instance, if the element is a block-level element, such as a div, header (h1), or paragraph (p), there’s a new line before and after the element. An inline element, though, such as a span, is not surrounded by line breaks. The display for both types of elements can be changed by setting the CSS display or float property.

An element’s positioning can also impact page flow. By default, elements have static positioning, where properties ...