Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Header Main Footer / 25 сообщений из 45, страница 1 из 2
  1  все
09.04.2017, 11:08
    #39435380
-=Koba=-
-=Koba=-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Header Main Footer
Подскажите как реализовать

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, 12:38
    #39435396
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Header Main Footer
-=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, 13:42
    #39435432
Bootstraper
Bootstraper
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Header Main Footer
-=Koba=-Вопрос я думаю избитый, ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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