ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Header Main Footer
45 сообщений из 45, показаны все 2 страниц
  все  
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
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437438
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mini.weblabу меня похожая задача, посмотрела - ничего Бутстрап не генерит
он не не нагенерил в css, зато что он создал в html!!!
тебе это надо?
...
Рейтинг: 0 / 0
12.04.2017, 16:57
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437444
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
вадя,

это не он - это я такой грид сделала (так требовалось по тз) :D
...
Рейтинг: 0 / 0
12.04.2017, 17:16
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437599
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
mini.weblab,

этот фрагмент кода вызывает особую гордость :-)
(это чтобы картинки растягивались на полную величину div'a):

Код: css
1.
2.
3.
4.
5.
6.
7.
.img-responsive-custom {
    display: block;
    max-height: 100%;
    min-height: 100%;
    max-width: 100%;
    min-width: 100%;
}
...
Рейтинг: 0 / 0
12.04.2017, 22:57
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437637
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
ага
вместо
https://webref.ru/css/background-size
...
Рейтинг: 0 / 0
13.04.2017, 05:40
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437649
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяага
вместо
https://webref.ru/css/background-size
То есть ты предлагаешь человеку картинки в фон запихивать? Забавно :)
...
Рейтинг: 0 / 0
13.04.2017, 07:10
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437651
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAТо есть ты предлагаешь человеку картинки в фон запихивать? Забавно :)
а что в этом плохого?
...
Рейтинг: 0 / 0
13.04.2017, 07:19
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437687
Фотография -=Koba=-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-=Koba=-
Участник
вадяskyANAТо есть ты предлагаешь человеку картинки в фон запихивать? Забавно :)
а что в этом плохого?

Ну они порой не нужны...


Тут я еще заметил

Большинство примеров у вас идут ввида

Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
<html>
	<body>
		<header>
		</header>
		<main/>
		<footer/>
	</body>
</html>



У меня же получается так

Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<html>
	<body>
		<div>
			<header>
			</header>
			<main/>
			<footer/>
		</div>
	</body>
</html>
...
Рейтинг: 0 / 0
13.04.2017, 09:09
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437689
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAТо есть ты предлагаешь человеку картинки в фон запихивать? Забавно :)
а что в этом плохого?Банальный функционал открыть, сохранить, копировать картинку и копировать URL картинки пропадает.
...
Рейтинг: 0 / 0
13.04.2017, 09:11
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437725
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAБанальный функционал открыть, сохранить, копировать картинку и копировать URL картинки пропадает.в этом есть смысл , ингода.

-=Koba=-,
я старался минимизировать.
как бы внешний див не нужен.
там задаётся css стили и у тэга html

без "желтой рамки"
https://jsfiddle.net/vh7ysw7u/3/
...
Рейтинг: 0 / 0
13.04.2017, 09:48
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437748
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAБанальный функционал открыть, сохранить, копировать картинку и копировать URL картинки пропадает.в этом есть смысл , ингода.
Да прям иногда. Ты посмотри сколько сейчас всяких фоточек шарится в инстаграме, фейсбуке, вконтактике и т.п. :)
...
Рейтинг: 0 / 0
13.04.2017, 10:07
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437749
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Сколько ссылок на картинки вставляется в чатики и переписки, сколько фотожаб делается на основе опубликованных в сети фотках...
...
Рейтинг: 0 / 0
13.04.2017, 10:09
| Ответить | Цитировать | Написать  
Header Main Footer
    #39437753
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAСколько ссылок на картинки вставляется в чатики и переписки, сколько фотожаб делается на основе опубликованных в сети фотках...
иногда не хочется чтоб картинки запросто копировали.
...
Рейтинг: 0 / 0
13.04.2017, 10:13
| Ответить | Цитировать | Написать  
Header Main Footer
    #39438266
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAСколько ссылок на картинки вставляется в чатики и переписки, сколько фотожаб делается на основе опубликованных в сети фотках...
иногда не хочется чтоб картинки запросто копировали.
Кому не хочется?
...
Рейтинг: 0 / 0
13.04.2017, 20:45
| Ответить | Цитировать | Написать  
Header Main Footer
    #39438277
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAвадяпропущено...

иногда не хочется чтоб картинки запросто копировали.
Кому не хочется?
владельцам сайтов, представь себе - это довольно часто встречается
...
Рейтинг: 0 / 0
13.04.2017, 21:13
| Ответить | Цитировать | Написать  
Header Main Footer
    #39438479
Фотография -=Koba=-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-=Koba=-
Участник
Вот что нашел еще

http://csstemplater.com
...
Рейтинг: 0 / 0
14.04.2017, 09:57
| Ответить | Цитировать | Написать  
Header Main Footer
    #39438482
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAпропущено...

Кому не хочется?
владельцам сайтов, представь себе - это довольно часто встречается
Да ты что? У нас крутится более 17000 сайтов, я в команде, что отвечает как раз за CMS модуль системы, думаешь я не знаю когда нужно фоновое изображение, а когда нет? И кому? :)
...
Рейтинг: 0 / 0
14.04.2017, 10:01
| Ответить | Цитировать | Написать  
Header Main Footer
    #39438489
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAДа ты что? У нас крутится более 17000 сайтов, я в команде, что отвечает как раз за CMS модуль системы, думаешь я не знаю когда нужно фоновое изображение, а когда нет? И кому? :)
я разве с этим спорю?
я из практики выуживания картинок, что бывает без знания js,css и html практически не возможно...
...
Рейтинг: 0 / 0
14.04.2017, 10:06
| Ответить | Цитировать | Написать  
Header Main Footer
    #39438710
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
-=Koba=-,
там же ж все просто :)
BS используется на случай "а вдруг захочется большего?"

https://jsfiddle.net/zLx3sgdg/
...
Рейтинг: 0 / 0
14.04.2017, 13:50
| Ответить | Цитировать | Написать  
Header Main Footer
    #39438804
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mini.weblab,
но не всем подойдёт такое
https://jsfiddle.net/zLx3sgdg/1/
...
Рейтинг: 0 / 0
14.04.2017, 15:23
| Ответить | Цитировать | Написать  
Header Main Footer
    #39439000
mini.weblab
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mini.weblab
Участник
вадя,
поправила
авторheader прижат к вверху всегда (+)
main посередине имеет разную высоту (+)
footer естественно снизу, причем если main по высоте меньше экрана footer прижат к низу, если длине footer не пржимается, а как бы скролится за main вниз. (+)


https://jsfiddle.net/zLx3sgdg/2/
https://jsfiddle.net/zLx3sgdg/3/
...
Рейтинг: 0 / 0
14.04.2017, 22:11
| Ответить | Цитировать | Написать  
45 сообщений из 45, показаны все 2 страниц
  все  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Header Main Footer
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?all=1&fid=22&tid=1444667]:
 0ms
get settings:
 6ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 62ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 44ms
get tp. blocked users:
 1ms
others: 233ms
total:  373ms
созд. / загр.: 373ms
x
x
Закрыть


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