Как сделать нижний колонтитул не видимым при прокрутке, кроме как внизу страницы? ⇐ Html

[Anonymous]

Я делаю сайт и сделал футер. Однако недостатком является то, что нижний колонтитул находится в одном и том же месте экрана, независимо от того, где я прокручиваю. Мне хотелось бы, чтобы нижний колонтитул был виден только в самом низу html-страницы (там, где должен быть нижний колонтитул). Я использовал позицию:fixed;, чтобы она фиксировалась внизу страницы. Однако недостатком является то, о чем я упомянул выше. Любые предложения приветствуются: D
Изображение:
index.html



Home







Home

a-town youth

• Home
  About
  Calendar
  News
  Contact
  Links
  
  
  
  

body {
margin:0px;
}
.colour-block {
background:#34495e;
width:60%;
padding:7% 20% 10% 20%;
color:#fff;
}
.white-block {
background:#fff;
width:60%; /*Change this to change padding/margin around text in dividers*/
padding:7% 20% 10% 20%;
color:#823A9C;
}

h1 {
text-align:center;
font-size:80px;
font-family:'wire one', serif;
font-weight:normal;
}
p {
font-size:20px;
font-family:'Raleway', serif;
}

/*------------------*/
/* SKEW CLOCKWISE */
/*------------------*/
.skew-cc{
width:100%;
height:100px;
position:absolute;
left:0px;
background: linear-gradient(to right bottom, #34495e 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
}

/*-------------------------*/
/* SKEW COUNTER CLOCKWISE */
/*-------------------------*/
.skew-c{
width:100%;
height:100px;
position:absolute;
left:0px;
background: linear-gradient(to left bottom, #fff 49%, #34495e 50%);
}

@media (max-width: 767px){
.colour-block h1, .white-block h1{ padding-top: 60px;}
}

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #34495e;
color: white;
text-align: center;
}





Home
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

About
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Calendar
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

News
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Contact
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Links
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.





Подробнее здесь: https://stackoverflow.com/questions/651 ... f-the-page