ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Position: fixed - сделать размеры блока как у body
6 сообщений из 6, страница 1 из 1
Position: fixed - сделать размеры блока как у body
    #39595854
casu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
casu
Гость
Есть страница, c:
Код: css
1.
2.
3.
4.
body { 
  max-width: 1200px;
  margin: auto;
}


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

Вопрос : есть блок <footer>, как средствами CSS сделать его "привязанным" к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется.
Ну например: окно браузера уменьшили...

Код: css
1.
2.
3.
4.
footer {
  position: fixed;
  bottom: 0;
}


"привязывает" <footer> к низу, но растягивает по ширине экрана.
...
Рейтинг: 0 / 0
02.02.2018, 19:19
| Ответить | Цитировать | Написать  
Position: fixed - сделать размеры блока как у body
    #39596062
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Агнец за бортом
Участник
Открой для себя flex, потрать два дня.
...
Рейтинг: 0 / 0
03.02.2018, 15:23
| Ответить | Цитировать | Написать  
Position: fixed - сделать размеры блока как у body
    #39596071
casu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
casu
Гость
Агнец за бортомОткрой для себя flex, потрать два дня.
Речь о align-content:flex-end ?
...
Рейтинг: 0 / 0
03.02.2018, 16:01
| Ответить | Цитировать | Написать  
Position: fixed - сделать размеры блока как у body
    #39596095
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
casu,

выложите пример на https://jsfiddle.net/
А так, навскидку:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
html, body {margin:0; padding:0; height:100%;}
body, #main {
  display: flex;
  flex-direction:column;
}
#main {
  flex: 1 0 auto;
}
#footer {
  flex: 0 0 auto;
}

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<body>
<div id="main">
  ...
</div> <!-- id="main" -->
<div id="footer">
  А это футер, с текстом внутри. Он находится в самом низу окна браузера,<br>независимо от количества контента на странице и размера окна.
</div>
</body>
...
Рейтинг: 0 / 0
03.02.2018, 16:53
| Ответить | Цитировать | Написать  
Position: fixed - сделать размеры блока как у body
    #39596123
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Агнец за бортом
Участник
casuАгнец за бортомОткрой для себя flex, потрать два дня.
Речь о align-content:flex-end ?

Речь о гибкой (флекс) компоновке в целом.
...
Рейтинг: 0 / 0
03.02.2018, 18:12
| Ответить | Цитировать | Написать  
Position: fixed - сделать размеры блока как у body
    #39596139
casu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
casu
Гость
Ребята, спасибо!
Агнец за бортом , за наставления!
user89 , за реальную практическую помощь. С некоторыми правками помогло.

Про код на https://jsfiddle.net/ понял.
Про flex в целом - уже в процессе.
...
Рейтинг: 0 / 0
03.02.2018, 18:50
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Position: fixed - сделать размеры блока как у body
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=30&tid=1444309]:
 0ms
get settings:
 9ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 54ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 46ms
get tp. blocked users:
 2ms
others: 12ms
total:  160ms
созд. / загр.: 160ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]