ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Header Main Footer
25 сообщений из 45, страница 1 из 2
  1  все
Header Main Footer
    #39435380
Фотография -=Koba=-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-=Koba=-
Участник
Подскажите как реализовать

header прижат к вверху всегда
main посередине имеет разную высоту
footer естественно снизу, причем если main по высоте меньше экрана footer прижат к низу, если длине footer не пржимается, а как бы скролится за main вниз.

Вопрос я думаю избитый, но не могу найти решения
Либо когда browser изменяешь размеры видно, что footer прыгает, либо что-то еще

Сейчас так

Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
.header{}

.main {
    width: 100%;
    padding: 20px;
    flex: 1;
    display: flex;
    justify-content: center;
} 

.by-softclub-admin-client-resources-AppResources-Style-footer {
    flex: 0 0 auto;
    padding-top: 0!important;
    margin-top: 0!important;
}



Может быть есть другие решения?
...
Рейтинг: 0 / 0
09.04.2017, 11:08
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435396
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
-=Koba=-,

зависит от doctype

Сделайте тестовый пример, обрывки кода здесь не прокатят.

я обычно делаю примерно так:
- main (общий контейнер) min-height:100%;
- main содержит внизу пустой блок высотой с footer
- footer смещён выше на величину его высоты

Вот упрощённый вариант (поиграйтесь со стилями)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>test</title>
<style>
* { margin:0; padding:0; }
html,body { width:100%; height:100%; }
#main { position:relative; margin:0 auto; width:100%; min-height:100%; }
#content { margin:0 auto; max-width:1000px; min-height:200px; background:#808080; }
#shift_footer, #footer { position:relative; clear:both; width:100%; height:100px; }
#footer { margin:-100px 0 0 0; background:#008000; }
</style>
</head>
<body>
  <div id="main">
    <div id="content">
       text text text
    </div>
    <div id="shift_footer"></div>
  </div>
  <div id="footer">
  </div>
</body>
</html>
...
Рейтинг: 0 / 0
09.04.2017, 12:38
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435432
Bootstraper
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Bootstraper
Гость
-=Koba=-Вопрос я думаю избитый, ...

За такой вопрос я бы банил.

-=Koba=-но не могу найти решения

А за это еще и увольнял ...

Проще в форум закинуть и ждать.
...
Рейтинг: 0 / 0
09.04.2017, 13:42
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435446
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
Bootstraper,

кстати, да, поддерживаю.
почему же Bootstrap не использовать для решения избитых вопросов ???
:)
...
Рейтинг: 0 / 0
09.04.2017, 14:19
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435450
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mini.weblabпочему же Bootstrap не использовать для решения избитых вопросов ???
воспользуйся и посмотри что он тебе нагенерит.
код ТС намного лучше
...
Рейтинг: 0 / 0
09.04.2017, 15:13
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435452
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
-=Koba=-,
чистый флекс
https://jsfiddle.net/vh7ysw7u/
...
Рейтинг: 0 / 0
09.04.2017, 15:39
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435479
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
вадя-=Koba=-,
чистый флекс
https://jsfiddle.net/vh7ysw7u/ у меня в хроме хедер и футер тупо резиновые. тоже самое можно было сделать таблицей, установив строкам высоту в процентах.
...
Рейтинг: 0 / 0
09.04.2017, 17:46
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435490
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Antonariyу меня в хроме хедер и футер тупо резиновые. тоже самое можно было сделать таблицей, установив строкам высоту в процентах.
можно, но таблица - это как бы ....
...
Рейтинг: 0 / 0
09.04.2017, 18:17
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435807
Alex_Wong
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex_Wong
Гость
бухалтер фантоцци,

подскажите, пожалуйста, как в Вашем примере правильно
подправить стили, чтобы не вылазил внизу центральный контент.

Есть преимущество по сравнению с примером на flex ? Где-то читал, что
на последнем разумно делать локальные комбинации, - либо криво
понял.

Поделитесь, плиз, мнением и навыками по Вашему примеру. Спасибо.

https://jsfiddle.net/gn8sgt6m/
...
Рейтинг: 0 / 0
10.04.2017, 13:39
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435857
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
вадяAntonariyу меня в хроме хедер и футер тупо резиновые. тоже самое можно было сделать таблицей, установив строкам высоту в процентах.
можно, но таблица - это как бы ....это как бы наглядней.
...
Рейтинг: 0 / 0
10.04.2017, 14:31
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435899
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex_Wongподскажите, пожалуйста, как в Вашем примере правильно
подправить стили, чтобы не вылазил внизу центральный контент.
Не нужно ничего совать в shift_footer . Он не для этого.

Alex_WongЕсть преимущество по сравнению с примером на flex ?
Как минимум то, что это работало с давних пор.
А Флекс появился сравнительно недавно...
...
Рейтинг: 0 / 0
10.04.2017, 15:11
| Ответить | Цитировать | Написать  
Header Main Footer
    #39435909
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex_Wong , вот в таком направлении нужно развивать пример от бухалтер фантоцци ...
https://jsfiddle.net/gn8sgt6m/1/
...
Рейтинг: 0 / 0
10.04.2017, 15:18
| Ответить | Цитировать | Написать  
Header Main Footer
    #39436019
Alex_Wong
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex_Wong
Гость
krvsa, спасибо, понятно.
...
Рейтинг: 0 / 0
10.04.2017, 16:47
| Ответить | Цитировать | Написать  
Header Main Footer
    #39436036
Фотография -=Koba=-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-=Koba=-
Участник
вадя-=Koba=-,
чистый флекс
https://jsfiddle.net/vh7ysw7u/
У вас футер вниз не прокручивается если боди высокое
...
Рейтинг: 0 / 0
10.04.2017, 17:08
| Ответить | Цитировать | Написать  
Header Main Footer
    #39436108
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
-=Koba=-У вас футер вниз не прокручивается если боди высокое
я сделал это специально....
...
Рейтинг: 0 / 0
10.04.2017, 18:40
| Ответить | Цитировать | Написать  
Header Main Footer
    #39436115
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
-=Koba=-У вас футер вниз не прокручивается если боди высокое
https://jsfiddle.net/vh7ysw7u/1/
...
Рейтинг: 0 / 0
10.04.2017, 18:53
| Ответить | Цитировать | Написать  
Header Main Footer
    #39436725
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
вадя-=Koba=-У вас футер вниз не прокручивается если боди высокое
https://jsfiddle.net/vh7ysw7u/1/
а сейчас, если содержимое main маленькое, то main начинается не от заголовка, а выравнивается посередине между header и footer
...
Рейтинг: 0 / 0
11.04.2017, 18:09
| Ответить | Цитировать | Написать  
Header Main Footer
    #39436748
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
бухалтер фантоцциа сейчас, если содержимое main маленькое, то main начинается не от заголовка, а выравнивается посередине между header и footer
https://jsfiddle.net/vh7ysw7u/2/
в общем-то , я просто затравку для продолжения подгонки сделал...
но вот так
https://jsfiddle.net/vh7ysw7u/2/
...
Рейтинг: 0 / 0
11.04.2017, 18:36
| Ответить | Цитировать | Написать  
Header Main Footer
    #39436910
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
вадяmini.weblabпочему же Bootstrap не использовать для решения избитых вопросов ???
воспользуйся и посмотри что он тебе нагенерит.
код ТС намного лучше
И что же он такого должен нагенерить??!
нам нужно вот это <nav class="navbar navbar-default navbar-fixed-top">. Это чистый css, где-то строчек 5 кода.

Здесь можно посмотреть пример от бутстраперов
...
Рейтинг: 0 / 0
12.04.2017, 01:00
| Ответить | Цитировать | Написать  
Header Main Footer
    #39436930
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mini.weblabвадяпропущено...

воспользуйся и посмотри что он тебе нагенерит.
код ТС намного лучше
И что же он такого должен нагенерить??!
нам нужно вот это <nav class="navbar navbar-default navbar-fixed-top">. Это чистый css, где-то строчек 5 кода.

Здесь можно посмотреть пример от бутстраперов
нужно то, что я показал в ссылках, а не одну твою строку....
...
Рейтинг: 0 / 0
12.04.2017, 02:18
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437194
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
вадя,

да, я согласна, что твой код шедеврален,
я просто не поняла, что там бутстрап-то генерит?
...
Рейтинг: 0 / 0
12.04.2017, 12:05
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437231
Фотография -=Koba=-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-=Koba=-
Участник
нашел еще решение

http://codepen.io/enjikaka/pen/zxdYjX

Везде flex
Когда изменяешь размер бразуера
Прыгает foter =(
...
Рейтинг: 0 / 0
12.04.2017, 12:34
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437241
Фотография -=Koba=-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-=Koba=-
Участник
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
...
Рейтинг: 0 / 0
12.04.2017, 12:40
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437282
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mini.weblabвадя,

да, я согласна, что твой код шедеврален,
я просто не поняла, что там бутстрап-то генерит?
сделай и посмотри
...
Рейтинг: 0 / 0
12.04.2017, 13:12
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437426
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
вадя,
у меня похожая задача, посмотрела - ничего Бутстрап не генерит
:-)

https://jsfiddle.net/254pbnz3/
...
Рейтинг: 0 / 0
12.04.2017, 16:27
| Ответить | Цитировать | Написать  
25 сообщений из 45, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Header Main Footer
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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