Bootstrap3 липкий нижний колонтитул перекрывает реактивный контент

Я использую бутстрап в сочетании с Shiny и R. Но это не имеет особого значения, потому что Shiny просто использует обычную установку bootstrap.Bootstrap3 липкий нижний колонтитул перекрывает реактивный контент

Так что моя сноска кодируется следующим образом:

/* Sticky Footer */ 
html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 40px; 
} 

.footer { 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 40px; 
    background-color: #f5f5f5; 
} 
/* End Sticky Footer

И в основном это хорошо работает. Что не работает, это изменение размера, я думаю, после загрузки всего содержимого. Поскольку R много вычисляет в фоновом режиме даже после загрузки кода HTML и т. Д., Размер страницы обычно становится больше после загрузки. Но тогда мой липкий нижний колонтитул перекрывает контент, и я весь день борюсь с этим, и пока не нашел решения. Есть идеи?

источник

2015-05-13 MichiZH

Попробуйте использовать 'position: static' в вашем нижнем колонтитуле CSS класс – Celt

-1

Пожалуйста, попробуйте эту ссылку ссылку на Sticky макете колонтитула http://getbootstrap.com/examples/sticky-footer-navbar/

/* Sticky footer styles 
-------------------------------------------------- */ 
html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
/* Margin bottom by footer height */ 
margin-bottom: 60px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
}

источник

2015-05-13 13:08:09

<body> 
<div id="wrapper"> 
<div id="main-content"> 

</div> 

<footer> 
</footer> 
</div> 
</body>

CSS:

body,html { 
height: 100%; 
} 

body { 
min-height: 100%; 
} 

#wrapper { 
height: 100%; 
position: relative; 
} 

#main-content { 
background-color: red; 
height: 1000px; 
width: 100%; 
} 

footer { 
clear: both; 
position: static; 
bottom: 0; 
height: 40px; 
width: 100%; 
background-color: blue; 
}

Пример: https://jsfiddle.net/a5xtu95z/

У меня нет большого опыта работы с бутстрап, но я не понимаю, почему это не будет орк?

источник

2015-05-13 13:13:59

Bootstrap3 липкий нижний колонтитул перекрывает реактивный контент

ответ

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