Мне нужно сделать прилипающий футер, у которого высота не фиксирована. Сделал при помощи данного кода:
if ($(document).height() <= $(window).height()) {
$("footer.footer").addClass("navbar-fixed-bottom");
};
Но появилась проблема
Мне нужно что бы фоновая картинка была до конца страницы но если добавить в код блока с фоном height: 100%;
то появляется вертикальная прокрутка, тк блок становится по высоте body
. Как это можно исправить?
Расположение блоков
body
header
div class="full-width full-width-bg" //здесь фон
footer class="footer "
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
width: 100vw;
min-height: 100vh;
}
header,
main,
footer {
display: block;
}
header {
background-color: red;
flex: 0 0 10vh;
}
main {
background-color: green;
flex: 8 0;
}
footer {
background-color: blue;
flex: 1 0;
min-height: 10vh;
}
<div class="container">
<header></header>
<main></main>
<footer>
</footer>
</div>
html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
}
body {
position: relative;
/* Растягиваем body по высоте html */
min-height: 100%;
}
main {
/* Выставляем отступ с высотой footer */
padding-bottom: 30px;
}
footer {
/* Позиционируем footer внизу main */
position: absolute;
bottom: 0;
width: 100%;
/* Высота footer */
height: 30px;
}
<body>
<header>
header
</header>
<main>
content
</main>
<footer>
footer
</footer>
</body>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
/* Чтобы занимал оставшееся пространство */
flex-grow: 1;
}
footer {
/* Чтобы footer не уменьшался */
flex-shrink: 0;
}
<header>
header
</header>
<main>
content
</main>
<footer>
footer
</footer>
body {
display: table;
min-height: 100vh;
}
main {
display: table-row;
/* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */
height: 100%;
}
<header>
header
</header>
<main>
content
</main>
<footer>
footer
</footer>
// Высчитываем высоту footer и делаем соответствующий отступ от main:
function footer(){
$('main').css('padding-bottom',$('footer').height());
}
window.addEventListener('load',footer);
window.addEventListener('resize',footer);
html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
}
body {
position: relative;
/* Растягиваем body по высоте html */
min-height: 100%;
}
main {
/* Выставляем отступ с высотой footer по умолчанию */
padding-bottom: 30px;
}
footer {
/* Позиционируем footer внизу main */
position: absolute;
bottom: 0;
width: 100%;
/* Высота footer по умолчанию */
height: 30px;
}
<html>
<head>
<script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script>
</head>
<body>
<header>
header
</header>
<main>
main
</main>
<footer>
footer
</footer>
</body>
</html>
Привет ребята, нуждаюсь в помощи, делаю приложение с картой и точками, задум: каждый пользователь может поставить точку с радиусом( circle ), и указать...