Footer не будет оставаться дном и обычно приходит через содержание

Я знаю, что этот вопрос был задан около 1000 раз, но на этот раз его разные
GOTO эту ссылку на Clicking Here to see it live и нажмите на заголовок, чтобы добавить содержимого может быть 20,30 раз и содержание получите ниже сноске, что я хочу, чтобы мой колонтитула в нижней части страницы и не приходят на содержание
код здесь, если ссылка не работает

Footer не будет оставаться дном и обычно приходит через содержание

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Footer</title> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div style="width:100%;height:50px;"></div> 
     <div id="options"></div> 
     <div id="content"> 
     </div> 
     <div id="footer"></div> 
    </div> 
</body> 
</html>

CSS

html,body{ 
    height: 100%; 
    margin: 0; 
} 
#wrapper{ 
    position: relative; 
    min-height: 100%; 
} 
#header{ 
    width: 100%; 
    height: 50px; 
    background: #1a73f8; 
    position: fixed; 
} 
#options{ 
    width: 270px; 
    height: 410px; 
    background: white; 
    border: 1px solid #e3e3e3; 
    position: fixed; 
} 
#content{ 
    width: 1000px; 
    margin-left: 290px; 
    border: 1px solid #e3e3e3; 
    box-shadow: .2px .2px 1px 1px #e3e3e3; 
    margin-top: 20px; 
} 
#footer{ 
    width: 100%; 
    height: 140px; 
    background: #1a73f8; 
    color: white; 
    position: absolute; 
    bottom: 0; 
}

источник

2015-06-17 Waqas

Ваш нижний колонтитул будет уважать ближайший относительно позиционированный элемент, это ваш '# content'. Вы пытаетесь очистить фиксированный элемент? – Aaron

Я пытаюсь стереть все пространство, которое приходит после нижнего колонтитула. Последнее, что я хочу, это нижний колонтитул, и не должно быть даже 1px пространства, оставшегося после нижнего колонтитула, так как ??? – Waqas

Возможно, я что-то упустил ... Вы пытаетесь заставить нижний колонтитул придерживаться нижней части содержимого или нижней части порта представления? – Bioto

Я не уверен что это именно то, что вы ищете, но, надеюсь, это помогает. Если вы хотите, чтобы ваш нижний колонтитул всегда был внизу каждой страницы, есть ли достаточное количество контента, чтобы оттолкнуть его или нет, вам нужно, чтобы люди называли «липкий» нижний колонтитул. Вероятно, вы могли бы найти несколько разных способов сделать это в Google, но это то, что я делаю, хотя это требует, чтобы вы знали высоту вашего нижнего колонтитула.

Сначала выньте свой нижний колонтитул из вашей обертки, просто положите div после вашего окончания тега div, который коррелирует с #wrapper. Затем добавьте padding-bottom: 140px; размер коробки: рамка; на #wrapper в вашем css. Обратите внимание, что он имеет ту же высоту, что и нижний колонтитул, это важно! Размер коробки укажет вашему обертке div, что добавка не должна быть добавлена к 100-процентной высоте, но вместо этого будет удалена. Это гарантирует, что вы не получите никаких полос прокрутки, если у вас на самом деле нет достаточного контента для их использования.

Второе, отнять позиция: абсолютная; нижний: 0; ясно: both; от #footer, вам больше не понадобятся.Затем добавьте margin-top: -140px;

наконец, убедитесь, что у вас есть эти в вашем CSS: телом { высоты: 100% } HTML { высота: 100% }

Надеется, что это работает для вас, что он должен делать это гарантируйте отсутствие перекрытия нижнего колонтитула и вашего содержимого, а также убедитесь, что ваш нижний колонтитул всегда начинается в нижней части страницы (если у вас больше контента, чтобы продвинуть его еще дальше).

источник

2015-06-17 16:29:50

Пробовал! нижний колонтитул получил 140px вверх ... CRAZY FOOTER – Waqas

Я думаю, что липкий нижний колонтитул имеет фиксированное положение и снизу до нуля, что заставляет его придерживаться нижней части страницы даже на свитке! но в моем случае я хочу, чтобы нижний колонтитул до конца до страницы, когда пользователь прокручивает его, не прилипает к дну, что хорошо – Waqas

, почему все голосуют за большой ответ .... – Waqas

Здесь немного сложно дать правильное решение, так как содержание #content может оказать сильное влияние.
Пока что с кодом, который вы указали, единственное, что я бы сказал, это то, что ваше тело не имеет высоты.
Действительно, большинство включенных div выходят из потока (с фиксированным или абсолютным положением).

Так что единственное, что я хотел бы добавить к вашему КСС

body{height: 100%;}

Это должно помочь нижние колонтитулы в нижней части страницы

EDIT

сейчас , чтобы быть уверенным, что ваш нижний колонтитул будет отображаться после #content, вы можете заставить его верхний быть в нижней части страницы с чем-то вроде это

#footer{top: 100%; bottom: 0;}

С этого момента, вы сможете добавить некоторый запас-топ, а на футере:

#footer{top: 100%; bottom: 0; margin-top: 20px;}

источник

2015-06-17 16:28:44 PIIANTOM

Added, Still no effect – Waqas

Неполный ответ. Отредактировано – PIIANTOM

да, вы можете это сделать ... Это то же самое, что и в моем решении, потому что я использовал div для создания фальшивого поля, и вы только что использовали top: 100%; но все же отлично – Waqas

На самом деле Кажется, я гениальный, я нашел решение .... Что мне нужно сделать, это добавить поддельный запас с div перед нижним колонтитулом, чтобы нижний колонтитул подумал, что это то, что мне нужно получить маржу от но на самом деле он будет получать маржу от какого-либо другого элемента так HTML

<div style='width:100%;height:160px;'></div> 
<div id="footer"></div>

я добавил 160px высоты, потому что мой колонтитул в высоту 140px и я хочу 20px маржа от содержания, так что я добавил 160px Теперь нажмите здесь и см., если он работает
Click here to goto live source and also don;t forget to click on big screen button of preview

источник

2015-06-18 11:26:18 Waqas

Примечание: вы также можете использовать margin-top: 20px до нижнего колонтитула и может сделать поддельный запас до 140px, поскольку высота нижнего колонтитула ... – Waqas

Footer не будет оставаться дном и обычно приходит через содержание

ответ

Смежные вопросы