yaparoff 0 Жалоба Опубликовано: 17 апреля На некоторых страницах сайта необходимо, чтобы футер был прижат к низу, т.к. контента мало. На других же страницах - контента, наоборот, много. И контент тогда переваливает за футер Как с этим бороться? Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 prophet_07 17 Жалоба Опубликовано: 17 апреля А зачем для main снизу отрицательный margin? Если делать без flexbox для основных блоков, то можно на этом генераторе посмотреть как прижать футер. 1 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 mrnobody 199 Жалоба Опубликовано: 17 апреля https://codepen.io/corvus-007/pen/bWdmpZ?editors=1100 1 Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
0 shamil_ozdemirov 1 Жалоба Опубликовано: 17 апреля (изменено) HTML код <div id='wrap'> <div id='header'>Шапка сайта</div> <div id='outer'> <div div='inner'> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p> </div> </div> <div id='footer'>Подвал сайта</div> </div> CSS код html,body{ height:100%; } #wrap{ min-height:100%; max-width:960px; background:#81B763; margin:auto; position:relative; } #header{ height:150px; background:#4D815D; } #footer{ background:#E5174E; height:100px; position:absolute; bottom:0; width:100%; } #outer{ padding-bottom:110px; min-height:100%; } Изменено 17 апреля пользователем shamil_ozdemirov Поделиться сообщением Ссылка на сообщение Поделиться на других сайтах
На некоторых страницах сайта необходимо, чтобы футер был прижат к низу, т.к. контента мало.
На других же страницах - контента, наоборот, много. И контент тогда переваливает за футер
Как с этим бороться?
Поделиться сообщением
Ссылка на сообщение
Поделиться на других сайтах