1

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

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

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

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

footer {
position: fixed;
bottom: 0;
}

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

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

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

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 (03.02.2018 00:09:51)

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-костилем,
або ж знайти інший варіант

4

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

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

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

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

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

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

6

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

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

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