Це кошмар якийсь! Чому підвал вашого сайту знову «спливає» і зрушує дизайн? Невже не можна нормально притиснути футер до низу сторінки чимось? Контентом або цеглою хоча-б! Цегла в монітор пролазить?
Зрозуміло, тоді сидите і нічого не робіть, поки не прочитаєте нашу статтю до кінця.
Робимо правильний футер для свого сайту
Багато власників сайтів зустрічаються з цією проблемою, коли footer сторінки просто спливає «догори». І тоді незрозуміло, що робити. Найчастіше таким недоліком грішать дизайни сайтів, зверстані на швидку руку, самостійно ( гурток «очманілі ручки») Або початківцями веб-майстрами.
При цьому на перших порах життя сайту нічого жахливого не відбувається. І така ідилія триває до тих пір, поки контент тисне «своєю вагою» на підвал, не даючи йому піднятися вгору. Але варто розмістити на сторінці матеріал меншого обсягу, і недавно «спокійний» футер моментально піднімається вгору, приводячи весь дизайн сайту в неналежний вигляд.
Для усунення цього «дефекту» зверстаного шаблону не обов'язково витрачатися на послуги веб-майстра. Найчастіше футер сайту можна поставити на місце самостійно. Розглянемо всі можливі варіанти усунення подібної проблеми:
перший спосіб
Перший спосіб «прив'язати» підвал «до дна» сторінки побудований на основі CSS. Для початку наведемо код прикладу, а потім більш детально розглянемо його реалізацію:
html (height: 100%;) header, nav, section, article, aside, footer (display: block;) body (height: 100%;) #wrapper (width: 1000px; margin: 0 auto; min-height: 100 %; height: auto! important; height: 100%;) #header (height: 150px; background-color: rgb (0,255,255);) #content (padding: 100px; height: 400px; background-color: rgb (51,255,102) ;) #footer (width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb (51,51,204);)
Для того щоб приклеїти підвал до низу сторінки тег
html (height: 100%;) body (height: 100%;)
Мінімальну висоту шару-контейнера встановлюємо теж в 100%. Для випадку, якщо ширина контенту буде більше, ніж висота контейнера, задаємо властивості значення auto. Завдяки цьому wrapper буде автоматично підлаштовуватися під ширину розміщеного на сторінці контенту:
#wrapper (min-height: 100%; height: auto! important; height: 100%;)
Рядок коду «height: 100%» призначена для старих версій IE, які не сприймають властивість min-height.
Щоб в дизайні сторінки відокремити місце під підвал, ми встановлюємо відступ для тега
#content (padding: 100px;)
На даному етапі ми отримали веб-сторінку шириною у весь екран і додатково 100 пікселів, які «нейтралізуються» від'ємним значенням відступу для футера (margin: -100px) при встановленому для нього відносному позиціонуванні (position: relative). Таким чином, за допомогою від'ємного значення відступу ми «зрушує» підвал в область контейнера, для якого встановлена висота в 100%.
В даному прикладі розмітка веб-документа задана за допомогою порівняно нових тегів HTML 5, які можуть бути неправильно інтерпретовані застарілими версіями браузерів. Через це весь дизайн сторінки може бути відображений некоректно. Щоб уникнути цього, потрібно нові теги з арсеналу 5 версії мови гіпертексту замінити на звичайні
вдосконалений варіант
Розглянутий вище спосіб того, як зробити футер внизу сторінки «непорушним» не всім підходить. Якщо в майбутньому ви збираєтеся модифікувати і вдосконалювати дизайн свого сайту за допомогою спливаючих вікон, тоді краще відмовитися від використання попередньої реалізації.
Найчастіше в реалізації pop-up вікон використовується властивість CSS z-index. За допомогою його значень задається порядок накладення шарів один на одного.
Чим більше значення z-index елемента, тим вище він буде перебувати в загальному стеку «нашарування».
Але через те, що в попередньому прикладі ми використовували від'ємне значення для футера, нижня частина спливаючого вікна буде перекриватися верхньої областю підвалу. Навіть незважаючи на те, що воно буде мати більше значення z-index. Тому що у батька спливаючого вікна (wrapper) значення цієї властивості все одно менше.
Ось більш досконалий варіант:
CSS - код прикладу:
html, body (height: 100%;) .header (height: 120px; background-color: rgb (0,255,102);) .main (min-height: 100%; position: relative; background-color: rgb (100,255,255); ) .footer (height: 150px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgb (0,0,153);)
Як видно з коду, підвал ми помістили до складу основного елемента. Контейнера ми задали відносне позиціонування, а для футера - абсолютне. Підвал ми закріпили в самому низу контейнера, встановивши його положення зліва і зверху в 0.
Варіант для підвалу з нефіксованим висотою
Попередні способи реалізації можуть гарантувати, що футер буде завжди внизу сторінки. Але тільки якщо підвал фіксованої ширини. А що робити, якщо кількість розміщується в ньому контенту не можна спрогнозувати?
Для цього буде потрібно більш досконалий варіант для нефіксованого підвалу. У ньому футера задається значення table-row для властивості display. Завдяки цьому він буде відображатися як рядок таблиці.
У HTML5 для структури коду введено кілька нових тегів: