1 Тема від mr.relax

  • mr.relax
  • Користувач
  • Поза форумом
  • Дата реєстрації: 02.02.2018
  • Повідомлень: 8
    • Репутація: 7

Тема: Position: fixed - зробити розміри блока div, як у body

Є сторінка з:
body {
max-width: 1200px;
margin: auto;
}

Тобто контент посередині.

Питання: є блок <footer>, Як засобами CSS зробити його "прив'язаним" до низу сторінки так, аби він був одного розміру з body?
Та, відповідно, змінював розміри, якщо у body змінюються.
Наприклад: вікно браузера зменшили...

footer {
position: fixed;
bottom: 0;
}

"прив'язує" <footer> до низу, але розтягує по ширині екрана.

Подякували: ostap34PHP1

2 Відповідь від FakiNyan Востаннє редагувалося FakiNyan (02.02.2018 22:30:32)

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Position: fixed - зробити розміри блока div, як у body

зробіть для body min-height: 100vh; і position: relative, а для footer position: absolute; і додайте ще width: 100%
https://jsfiddle.net/y99ufcu4/

<div class="wrapper">
  <footer></footer>
</div>
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  width: 100%;
}
.wrapper {
  position: relative;
  max-width: 300px;
  height: 100%;
  margin: auto;
  background: grey;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: red;
}
Подякували: leofun011

3 Відповідь від 221VOLT Востаннє редагувалося 221VOLT (03.02.2018 00:09:51)

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

Re: Position: fixed - зробити розміри блока div, як у body

FakiNyan написав:

зробіть для body min-height: 100vh; і position: relative, а для footer position: absolute; і додайте ще width: 100%
https://jsfiddle.net/y99ufcu4/

<div class="wrapper">
  <footer></footer>
</div>
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  width: 100%;
}
.wrapper {
  position: relative;
  max-width: 300px;
  height: 100%;
  margin: auto;
  background: grey;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: red;
}

наш формошльоп ще не довчився
дивіться що буде коли в боді буде контент

https://jsfiddle.net/y99ufcu4/1/

юзайте або позішн фіксед - тоді футер завжди буде видно знизу,

або додайте мінімальну висоту контейнеру, щоб футер був знизу коли контенту мало,
та ховався вниз коли контенту багато- більше ніж одне вікно

ну і не забудьте про внутрішній відступ контейнера знизу на висоту футера
у випадку змінної висоти футера можна підперти js-костилем,
або ж знайти інший варіант

221VOLT вебсайт

4 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: Position: fixed - зробити розміри блока div, як у body

FakiNyan написав:
body {
  height: 100vh;
  width: 100%;
}
body {
  min-height: 100vh;
  width: 100%;
}
Подякували: FakiNyan1

leofun01 вебсайт

5 Відповідь від mr.relax Востаннє редагувалося mr.relax (03.02.2018 22:29:09)

  • mr.relax
  • Користувач
  • Поза форумом
  • Дата реєстрації: 02.02.2018
  • Повідомлень: 8
    • Репутація: 7

Re: Position: fixed - зробити розміри блока div, як у body

На жаль (або на щастя) запропонованим способом не вийшло, але зробив без position, через flex.
Хлопці leofun01, 221VOLT, FakiNyan - Велике Дякую за допомогу!

Подякували: FakiNyan, ostap34PHP2

6 Відповідь від mr.relax

  • mr.relax
  • Користувач
  • Поза форумом
  • Дата реєстрації: 02.02.2018
  • Повідомлень: 8
    • Репутація: 7

Re: Position: fixed - зробити розміри блока div, як у body

Вирішив причепити приклад. Можливо комусь знадобиться, або покритикуєте.
https://jsfiddle.net/mrrelax/uktb3756/

Подякували: FakiNyan, 0xDADA11C7, koala, leofun014