Jump to content
  • 0

body или wrapper?

DivMan

Asked by DivMan,

 Share

Question

13 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Строго говоря, фон, даже если он задан для body, на самом деле применяется к html (если только для html не задан свой отдельный). Но вот многие сторонние скрипты всяких всплывашек, выпадушек и и.п., действительно, отсчитывают координаты от document.body, так что злоупотреблять скукоживанием body и впрямь не стоит. На проекте для себя можно всё:)

  • Like 2
Link to comment
Share on other sites
  • 0
lexxcode Explorer

lexxcode

Posted
Posted

Я лично общие враперы стал крайне редко использовать. Это дает больше свободы для реализации различных дизайнерских решений. Но body превращать в врапер это еще более худшая идея.

 

А что касается фона, то на html его нужно вешать, а не на body. Мой вам совет ;)

  • Like 2
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

А вот нужен ли сейчас общий враппер для поддержания цепочки 100%-ной высоты? Не пора ли уже ставить контейнеру прибитого футера min-height:100vh, а не понимающим этого динозаврам давать изящно деградировать?

  • Like 1
Link to comment
Share on other sites
  • 0
lexxcode Explorer

lexxcode

Posted
Posted
я для этого враппера делаю те же 100% в высоту

Пилить body и врапера 100% высоты, тоже не лучшая практика. Раньше это было вынужденная  мера для ультра старых браузеров, типа IE6, сейчас все это можно решить лучше и избавиться от некоторых проблем с фоновыми изображениями

 

А вот нужен ли сейчас общий враппер для поддержания цепочки 100%-ной высоты? Не пора ли уже ставить контейнеру прибитого футера min-height:100vh, а не понимающим этого динозаврам давать изящно деградировать?
 

Я футер и так прижимаю без всяких 100% высоты и min-height: 100vh тоже не нужны

Link to comment
Share on other sites
  • 0
lexxcode Explorer

lexxcode

Posted
Posted

alexriz, а как? Заинтриговал..

В чатике кидал когда-то уже http://jsfiddle.net/alexriz/WgaA6/

Суть:

html

<!DOCTYPE html><html lang="ru"><head>    <meta charset="utf-8">    <title>Title</title></head><body>    <header class="header"></header>    <main class="main"></main>    <footer class="footer"></footer></body></html>

css

html {    min-height: 100%;    position: relative;}body {    margin: 0;}.header {    width: 1000px;    margin: auto;}.main {    width: 1000px;    margin: auto;    padding-bottom: 100px;}.footer {    width: 1000px;    height: 100px;    margin: auto;    position: absolute;    left: 0;    right: 0;    bottom: 0;    box-sizing: border-box;}
  • Like 2
Link to comment
Share on other sites
  • 0
lexxcode Explorer

lexxcode

Posted
Posted
Для фиксированной ширины футера подойдет, а для адаптивного нужен js при таком способе

Оно абсолютно элементарно адаптируется. Это даже кот научит адаптироваться на чем угодно ;)  

 

Для фиксированной высоты футера подойдет
 

А высота не может быть сделана резиновой на футере при любом из старых методов прижатия футера, кроме табличной верстки.

 

На flex-box конечно можно сделать прижатие и при этом гибкий по высоте футер

Link to comment
Share on other sites
  • 0
lexxcode Explorer

lexxcode

Posted
Posted
Прикольно, но одно 100% высоты там всё-таки есть, я уж подумал про совсем без него.

там min-height: 100%; (!!!)  Это очень важное отличие от старого метода с оберткой и установления жесткого height: 100%; для body и wrapper

 

И динамическая высота футера в пролете. Но решение интересное!
 

Оно и раньше в пролете было, так что такое. Чтобы было не в пролете, то нужно применять современные технологии :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept