📜 ⬆️ ⬇️

"Knocked" to the bottom of the footer without problems

Good day, Habrayuzer.
Due to the incomprehensible purpose of this topic - CSS Sticky Footer / Sticky footer and the fact that mine is not a registered user of Habrahabr, I suggest my own version.

The variant is old and tested by hundreds of projects, but first I will describe the minus of the above mentioned method:
- if you need a popup or a lot of popups (in non-yaksovyh variants) inside #main, then dividing #main and #footer by global z-indexing (for IE6), your popups will climb under your footer, since at least for FF, but z-index for #footer will need to be specified more than for #main.

And so, the method:
')
<div class="page">

<div class="header">
</div>

<div class="content">
</div>

<div class="footer">
</div>

</div>

Also attached is the stylistic part of the template:

.page { width: 100%; min-width: 996px; min-height: 100%; position: relative; z-index: 1; }
.header { width: 100%; height: 150px; position: relative; z-index: 3; }
.content { width: 100%; padding-bottom: 50px; position: relative; z-index: 2; }
.footer { width: 100%; height: 50px; left: 0; right: 0; bottom: 0; position: absolute; z-index: 4; }

For IE6, I think the styles are known to everyone, but I will still describe what I personally use, what I tested with several hundred projects and what has never failed even in the most complex designs:

* html .page { height: 100%; width: expression((document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 996 ? "996px" : "auto") : (document.body.clientWidth < 996 ? "996px" : "auto")); }

Many will swear at the long expresn, but it works fine and he needs one, unlike the previous method!
The cleaning method after floating elements is basically the same.

Of course, this is the most universal method, but in complex designs one has to adapt to the vulnerable soul of the designer, although this is usually given by “little blood”.

Pros:

Minuses:


PS Do not scold for formatting, I will definitely make everything beautiful in the second post.

UPD: Example

Now there is no time to write a separate example. Just today they sent an invitation.

Source: https://habr.com/ru/post/67337/


All Articles