Crear Paginas Css

Create Pages that Fill the Browser with CSS
By: Zoe Gillenwater
A frequently asked question in CSS forums is how to create pages that stretch vertically to fill the browser window, regardless of the amount of content. With tables, you would nest your entire design in a table with a single cell and set both the cell and table's height to be 100 percent. With CSS, it's also quite simple and easy.In this tutorial, you will learn the basic CSS technique for making pages fill the browser window, which you can also use any time you have a div that you want to stretch to fill its parent. Please note, however, that this is not a tutorial about making a footer stick to the bottom of the browser viewport or about emulating frames. These are more complicated layout requirements that may becovered in further tutorials, building on the 100 percent height technique introduced here.

Before You Begin
Before you set out to make your page stretch to fill the browser window, take a moment to evaluate whether such a thing is really necessary. After all, once your site is populated with all of its content, chances are that most pages will be long enough to generate a vertical scrollbar with nohelp from you. Also, even if some of the pages on your site are short, such as the Contact Us page, keep in mind that that's kind of how the web works: a user's browser window can be any shape or size, and there will be gaps below or to the sides of the content on almost all web pages. The web, after all, is not print, where you rigidly control what content appears where and how much space ittakes up. However, if you still can't let that short page stop bothering you, I'm happy to provide you with a simple CSS solution, as full-height pages are really just a graphic effect and do not seem to harm usability in the least. Read on!

Understanding Percentages
The key to making a 100 percent height page is understanding how dimensions set in percentages are interpreted by the browser. Theeasiest way to understand this, of course, is to see it in action. So, download the support files for this tutorial by clicking on the Download link at the bottom of the page. Open the file 100-percent-height.html in a browser. That green div, given the i d of container in the source, is what we are going to try to get to stretch to fill the page. Open the same file in Dreamweaver or your texteditor of choice. If you use Dreamweaver, go straight into Code View. You'll notice that there is some very basic CSS in the head of the page to provide a baseline for our styling. What do you think we need to add to get the green container div to take up 100

1 of 4

percent of the height of the viewport (meaning the viewable area of the browser window)? The first thing that many developerswill add is h ei g ht : 1 0 0% to the div they want to stretch. Add this to the #container rule now, then preview the page in a browser. You'll see that the page looks exactly as it did before: the green div has not filled the viewport, but is still only as tall as its content. This is because percentages are relative dimensions based on the dimensions of their parents. When you declare a percentageheight on #container, the browser looks at the height of the parent element, b od y , for how large to make this percentage in absolute terms. However, the b od y element has no height declared itself. When elements do not have height declared, they simply take up as much vertical space as the content dictates they need to and stretch no further. So, without a height on the b od y , it does notstretch to fill the viewport. Any time you declare a percentage dimension on an element, make sure its parent element has a dimension set on it as well so that the child will have something to base its percentage dimension off of. In the case of our page, this means we need to add 100 percent height to the b od y element, and, in turn, its parent, the h tm l element. We want them to stretch to...