Google Material Design нижний колонтитул всегда в конце страницы/внизу

Question

В настоящее время у меня возникла проблема с Google Material Design Lite. Если вы посмотрите пример портфеля от Google https://getmdl.io/templates/portfolio/about.html и имитируете большой экран, нижний колонтитул не останется внизу. Есть ли решение для этого?

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

Answer 1

Вы должны поместить свой набор конкретный min-height к .mdl-grid.portfolio-max-width,

Так же, как:

/* When the Navbar is big */ 
.mdl-grid.portfolio-max-width { 
    min-height: calc(100vh - 316px); 
} 

/* When the Navbar is small */ 
.mdl-grid.portfolio-max-width { 
    min-height: calc(100vh - 180px); 
} 

Это будет работать.

Надеюсь, это поможет!

EDIT

Окончательное решение для меня:

/* When the Navbar is big */ 
.mdl-grid.portfolio-max-width { 
    min-height: calc(100vh - 316px); 
    display: block; 
} 

/* When the Navbar is small */ 
.mdl-layout__content.header-is-compact > .mdl-grid.portfolio-max-width { 
    min-height: calc(100vh - 137px); 
} 

и следующие строки в обработчик скроллинга в файле MDL JavaScript:

this.content_.classList.add('header-is-compact'); 
 
// the following line to the else if where all the classes get removed 
 
this.content_.classList.remove('header-is-compact');

Answer 2

Дайте мне знать, если вы этого хотите

Добавьте класс оболочки вокруг существующего кода. Сделайте относительный класс обертки. получить высоту нижнего колонтитула и прямо заявить об этом. Назначьте то же значение, что и нижнее дно, к классу обертки.

.wrapper{ 
    position:relative; 
    padding-bottom:75px; 
} 
#textbox { 
background:rgba(255,255,255,1); 
padding:10px; 
font-family:arial; 
z-index:-1; 
box-shadow:0 0 30px rgba(000,000,000,1); 
border-radius:10px; 
line-height:25px; 
display:block; 
} 


#footer { 
background-color:white; 
width:50000px; 
position:absolute; 
bottom:0px; 
left:0px; 
color:black; 
font-family:arial; 
border:0px; 
margin:0px; 
display:block; 

height:75px; 
}