Преси мазе (долния) към долната част на страницата

Tags: CSS, HTML, позиция, дъно, долен колонтитул

Доста често има нужда да натискате мазето до долната част на страницата, дори и ако височината от съдържанието на сайта е по-малка от височината на екрана. Това ще ни помогне такива отлични качества, като позиция, и отдолу.

На пръв поглед, задачата е много прост - просто поставете Разделение в долната част на страницата. Все пак, струва си да се има предвид, че съдържанието на съдържанието може да бъде по-малко от една страница.

Нека да започнем с много прост, нека да кажем, че имаме

мазе с определено съдържание:

Това долния е необходимо да се постави преди затварящия маркер . без да го поставите допълнително вътрешно Divov друг.

Ето как ще изглежда един CSS стил за този долен колонтитул. че той винаги е бил притиснат до дъното на страницата:

Абсолютно позициониране марки

се поставят в страницата, напълно игнорирайки останалите елементи. и долния ляв координати са на екрана на примадоната.

Изглежда, че всичко - в мазето се притиска към долната част на страницата при попълване съдържание е по-малко от височината на страницата, тя изглежда както трябва. Но не, вие ще забележите, ако пълното съдържание страницата по-голяма от височината на екрана, част от съдържанието ще бъде скрита под мазето, всичко това е заради абсолютното положение води до игнориране на останалите елементи, а може би ще имате празно място в мазето.

За да се отървете от тези два проблема, което трябва да направите, за да добавите CSS стил за тагове, да, това . и не . в противен случай тя няма да работи както трябва, това ще изглежда като този стил:

Трябва да сте наясно, че абсолютно позициониране зависи от позиционирането на майка елемент. Така, ако основния елемент позициониране по отношение на. отброяването координира е спрямо ръбовете на елемента майка. Необходимо е минималната височина, ако съдържанието е по-малка от височината на екрана, в мазето направих, беше прав в долната част.

Проблемът с припокриване мазе съдържание е решен по различни начини, но най-доброто, по мое мнение, да добавите маркер вата стойност под, равна на или малко по-голяма от височината на мазето на съдържанието не е тясно прилепнала към мазето, за стила:

Сега всичко мазето винаги ще бъде в долната част, това няма да се появи лентата за превъртане, ако съдържанието е по-малко. Казано по-просто, това е универсален метод. Сега ще дам няколко примера за използването на този метод е, че вие сте убедени в това свое действие.

В момента има приблизително следния HTML код:

И това CSS код:

Ето как ще изглежда е всичко, ако съдържанието е по-малка от височината на екрана:

Ето един пример за това как сайтът ще изглежда, ако съдържанието на сайта по-голяма височина на екрана (като единствената разлика е в HTML кода, добави няколко точки на текст):