Сделать нижний колонтитул липким, но не экраном?

Как сделать нижний колонтитул (нижний колонтитул) придерживаться нижней части экрана, но не прилипать к экрану? Если я на мониторе 1080p, на веб-сайте нет прокрутки. Когда я пробую 1366x768, сайт становится прокручиваемым. Я хочу, чтобы нижний колонтитул был на 100 пикселей ниже содержания, потому что сейчас нижний колонтитул находится поверх содержимого. Вот моя структура HTML:Сделать нижний колонтитул липким, но не экраном?

<body> 
    <div id="container"> 
     <div id="header"></div> 
     <div id="body"></div> 
     <footer></footer> 
    </div> 
</body>

Итак, у меня есть заголовок, тело и нижний колонтитул внутри контейнера. Все руководства/учебные пособия, которые я видел, делают нижний колонтитул на экране. Если он не прилипает к экрану, он не будет придерживаться низа. Всякий раз, когда я открываю панель/Инструменты Chrome Developer Tools, нижний колонтитул снимает резервную копию, что, я думаю, связано с тем, что высота моего тела составляет 100%? Но я не уверен. Помогите оценить! Благодарю.

источник

2015-01-07 MortenMoulder

возможный дубликат [Сделать колонтитул палку внизу страницы правильно ] (http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) – jbutler483

Возможный дубликат [Как вы можете получить нижний колонтитул в нижней части веб-страницы ?] (http://stackoverflow.com/questions/42294/how-do-you-get-the -footer-to-stay-at-the-bottom-of-a-web-страница) –

Довольно просто: сделайте html и body 100% высоты, ваш контейнер (все, что должно быть в исходном окне просмотра). Расположите контейнер относительно, нижний колонтитул абсолютный и поместите что-нибудь ниже.

Example on JSFiddle

Код

<style type="text/css"> 
    html, body { height: 100%; } 

    #container { position: relative; 
     /* updated to support footer push */ 
     min-height: 100%; 
     padding-bottom: 60px; /* must be the same as footer height */ 
     box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
    } 
    #below { height: 500px; } /* or no height, or whatever */ 

    footer { position: absolute; bottom: 0; height: 60px; width: 100%; } /* as it's absolute, you should give it a specific height, or let it be as wide as its content */ 
</style> 

<div id="container"> 
    <footer>F-F-F-F-F-FOOTER!</footer> 
</div> 
<div id="below"></div>

Редактировать см отредактированный код выше; min-height вместо height для контейнера, чтобы он мог растягиваться, но не менее быть на высоте, как на экране. Вам нужно будет добавить нижнюю прописку, также как нижний колонтитул, чтобы нижний колонтитул не перекрывал ваш контент. А также добавьте box-sizing: border-box, в противном случае отступы будут добавить к высоте, в результате чего нижний колонтитул будет сдвинут вниз по исходному окну просмотра.

(Ради истории, here is the original fiddle)

источник

2015-01-07 11:34:12 giorgio

для чего нужен «синий» раздел? – jbutler483

Если я правильно понял, вы хотите, чтобы нижний колонтитул находился в нижней части экрана при загрузке страницы, но он должен прокручиваться вместе с остальной частью страницы. Верный?Синяя секция должна продемонстрировать любой контент, который находится вне экрана, и будет отображаться при прокрутке – giorgio

@ jbutler483 код, размещенный здесь, является только минимальным требуемым кодом. Визуальный пример - jsFiddle. Поэтому, если вы хотите поместить код в блок примера фрагмента кода (или что бы он ни назывался ...), вы должны указать полный пример. +1 за усилие. – giorgio

footer { position : absolute; bottom : 0px; }

позиция: фиксированная (Если вы хотите, чтобы вставить любой HTML элемент на экране и не будет двигаться во время прокрутки)

позиции: абсолютной (когда это будет отображаться, это будет указано в позиции, но позже размер экрана и прокрутка могут изменить его положение)

Спасибо (извините за слабый английский)

источник

2015-01-07 11:38:01 Tiger

можно добавить некоторое дополнение к нижней части страницы, а затем использовать vh измерения:

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#header{ 
 
height:10vh; 
 
} 
 
#container { 
 
    background: red; 
 
    position:relative; 
 
} 
 
#body { 
 
    height: 70vh; 
 
    background: gray; 
 
    padding-bottom:20vh; 
 
} 
 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 20vh; 
 
    width: 100%; 
 
    background: blue; 
 
}

<body> 
 
    <div id="container"> 
 
    <div id="header">header</div> 
 
    <div id="body">body</div> 
 
    <footer>footer</footer> 
 
    </div> 
 
</body>

источник

2015-01-07 11:43:52 jbutler483

Вам нужно прокрутить, чтобы увидеть нижний колонтитул. – MortenMoulder

попробуйте вместо этого @Snorlax – jbutler483

Рекомендуется ли использовать размеры разделителя заголовка, тела и нижнего колонтитула в процентах вместо пикселей? Я так не думаю. – MortenMoulder

Сделать нижний колонтитул липким, но не экраном?

ответ

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