Today we'll talk about two common problems that layout designers face when making up site layouts. One of the problems is the task of pressing the footer to the bottom of the screen. The essence of the problem is that at different monitor resolutions the footer was pinned to the bottom of the browser window in the case when the middle (content) part of the site contains a small amount of content.

The second urgent task is the need stretch some inner block to the full height of the body container... As a rule, this is required so that the background image of this block is the full height of the page from the top of the page to the footer.

We will press and stretch using CSS, you can bring a java script here, but why, if it can be done easier and more elegantly. The solution to such problems due to the Java code has one obvious drawback, the Java script can be disabled in the browser and the layout will float.

I have solved similar problems before, but each time I had to look for information on a new one how to press the footer and stretch the div block, because I did not understand the essence.

Press the footer down to the bottom of the page.

the body container is gray, inside it is a 200px wide #wrapper, centered. Inside the wrapper, three blocks are sequentially located from top to bottom: #header - a pink header; #content - the content of the site with a white background; #footer is a black footer. The height of the header and footer is assumed to be 50 pixels. The height of the content part varies according to the content. Visually, it looks like this.

First, you need to move the footer block outside the wrapper (#wrapper). Then for html, body, #wrapper containers set the height to 100% (height: 100%). After that, a scroll bar will appear, and the footer will be located below the visible part of the browser window.

To avoid this misunderstanding, set a negative vertical spacing for the footer equal to the height of the footer (margin: -50px auto; - offset up by 50 pixels and align to the center). Now our footer crawls over the wrapper block and the content block if the height matches. Let's make an inblock bottom margin of 50px for the content block, now everything looks nice.

So far this option works in the "correct" browsers (I've tested in opera, firefox, google chrome and IE 8). In a non-browser IE 6 did not check the performance, in IE 7, in theory, it should work.

How to stretch a div block to the height of its parent block

UPD: 04/03/2014

A certain, allegedly gap in the presentation of information was formed. I will try to fill it in. The bottom line is that there are comments in the comments on the topic that the content will not stretch as promised. Firstly, the article does not talk about the need to stretch a block of content. Secondly, in the article, the wrapper block is stretched to the height of the body block, which is said in the title (how to stretch the block in height), which was required to be proved. I did not set myself to solve some universal problem, it is, in principle, not possible.

But to show you that all problems can be solved, I will show you how to "stretch" the content block as well. I will make a reservation right away that it is impossible to expand one block to another block directly in the block model without javaScript; this can be done only at 100% height. Without javascript, the question is solved by the table. Make 3 cells vertically (header, content, footer). If you limit the height of the header and footer, and make the height of the table 100%, then in the end the content part will be calculated by the browser automatically.

I'll show you how to paint the background of a content block white without touching the wrapper block. Everything is very simple, we create another block nested in the wrapper block, let's call it, for example, wrapper2. Give it a height of 100% and a white background. What and was required to prove

Until next time. For a snack, as always, a juicy video on the topic of extreme alloy. Rafting on the Zambezi River, a rapids with a telling name - "devil's toilet".

I always run into trouble when needed stretch the block to 100% of the page height... For example, I have a div that needs to be stretched, but this is a little more complicated than it sounds. So, why not find a cross-browser solution to stretch the block to the full height of the page? Today we will try to find this solution.

Let's say you have an html file like this:

The CSS is attached to it:

Body (margin: 0; padding: 0;) #content (background: #EEE; border-left: 1px solid # 000; border-right: 1px solid # 000; padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana, sans-serif; width: 960px; height: 100%;)

What this gives us, you can see by going to:

As you can see, the page height is determined by the content and does not stretch 100%, even though we added a 100% height property to the #content block. How so? Let's think a little about HTML. HTML is just a bunch of containers nested within each other. So, our page first has an html container, then inside the html container there is a body container, and, finally, a block with the content identifier is located in the body. When we place content in one of these boxes, it stretches that box and all other boxes containing that box. So we stretch the block

when we put text in it, this, in turn, we stretch other blocks (in our case, these are the body and html blocks).

By adding to the block

declaration height: 100%, we say the div id = "content" needs to be stretched to the full height of the parent block. In our example, as you can imagine, this parent block is the body tag. So the height of the div id = "content" is the full height (100%) of the body tag. Okay, but what's the height of the body tag? It's simple: the height of the body tag is equal to the height of the block.

, which we have not asked anywhere! So when we create a height: 100% declaration, we just say: the block must be equal in height to itself!

To fix this, we need to assign a custom height to the body tag. But we will face the same problem again, because the body tag lies in the html tag. So to stretch the block

to the full height of the browser window, we need to set the body and html tags to a height that would correspond to the full height of the page.

Html (height: 100%;) body (margin: 0; padding: 0; height: 100%;) #content (background: #EEE; border-left: 1px solid # 000; border-right: 1px solid # 000; padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana, sans-serif; width: 960px; min-height: 100%;) / * IE specific * / * html #content (height: 100 %;)

And that is all. Check out the demo. Content block stretches to the full height of the browser window.

Notice the declaration min-height: 100%; : thanks to it, in case the content goes outside the browser window, the background will also stretch behind the content.

Do not forget about old IE browsers that do not understand the min-heigt property, for them you need to add * html #content (height: 100%;).

Materials used

Screen width and height in CSS

You can stretch the block to the full width and height of the browser window using:

1. ... Example:. div (position: fixed; top: 0; left: 0; width: 100%; height: 100%;)
2. div (width: 100vw; height: 100vh;)
3. the initial width and height of the html tag. By default, the height of any tag, including html and body, is equal to its content. In order for the element to have min-height: 100%; , the height of its parent must be specified.

   If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the percentage value is treated as "0" (for "min-height") or "none" (for "max-height"). [w3.org]

Width is easier because the width of the block element is equal to the width of its parent. The body only needs to have its margin and padding set to zero.

Align the whole monitor screen to the center of the browser window

Many sites, including the "Blogger's Cheat Sheet" content are limited to a certain width and.

In order for the content to go beyond these 1200px, but be limited by the width of the browser window, the following code is enough:

Full screen CSS

Images look especially great. They take up the space they need, but no more than the width of the browser window.

The code is slightly modified, based on the article. The corresponding option for the video is also written there.