Липкий нижний колонтитул переменной высоты

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

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

Примечание: нижний колонтитул переменной высоты, поэтому я не могу использовать константу, чтобы компенсировать нижний колонтитул.

CSS:

body div#site-wrapper { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; left: 0; right: 0; bottom: 0; 
} 
body div#site-wrapper > * { 
    display: table-row; 
} 
div#site-content-wrapper { 
    min-height: 100%; 
} 
footer { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 
footer div#footerContentWrapper { 
    overflow: hidden; 
    position: absolute; 
    left: 0; right: 0; bottom: 0; 
}

HTML:

<div id="site-wrapper"> 
    <div id="site-content-wrapper"> MAIN CONTENT </div> 
    <footer><div id="footerContentWrapper" class="background"> 
     FOOTER CONTENT 
    </div></footer> 
</div>

Вот скрипку показывает проблему: ширина https://jsfiddle.net/jhkL9bba/

источник

2015-12-30 RedLaser

возможно что вы можете сделать скрипку, чтобы показать проблему? .. также что вы определяете как «много контента?» .. много контента может означать разные вещи, например, 80% или 70% страницы занято основным контентом? – repzero

Теперь я добавлю скрипку, а то, что я имею в виду под большим количеством контента, достаточно, чтобы прокрутить ее. – RedLaser

Fiddle был добавлен сейчас – RedLaser

Набор колонтитула ДИВ # footerContentWrapper быть 10vh, пример

footer { 
    position: relative; 
    width: 100%; 
    height: 15vh; 
}

и остаток 85vh место в сНу # сайт-контент-обертку, например,

div#site-content-wrapper { 
    position:relative; 
    height: 85vh; 
    background:#F00; 
    border:solid blue; 

}

вынимают CSS колонтитула стиль

здесь аа скрипку https://jsfiddle.net/repzeroworld/vz4cuzpr/

Ограничения: нижний колонтитул увеличится/уменьшится немного , если пользователь изменит размер окна.

источник

2015-12-31 03:24:17 repzero

okay ..... Вот попытка ... Я думал javascript подход будет хорошей идеей, захватив событие изменения размера окна и сделав необходимое, но это подход css – repzero

Я нашел, что CSS ниже работает. Это работает, потому что я снял абсолютное позиционирование колонтитула обертке, таким образом, заставляя его иметь ту же высоту, футер устранив тем самым мою проблему, как это будет правильно в нижней части, а не по содержанию

body div#site-wrapper { 
    display: table; 
    table-layout: fixed; 
    position: absolute; 
    height: 100%; width: 100%; 
    top: 0; left: 0; right: 0; bottom: 0; 
} 
body div#site-wrapper > * { 
    display: table-row; 
} 
div#site-content-wrapper { 
    height: 100%; 
} 
footer div#footerContentWrapper { 
    overflow: hidden; 
    padding: 10px 50px 5px 50px; 
}

источник

2015-12-31 09:55:37 RedLaser

Липкий нижний колонтитул переменной высоты

ответ

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