Отступ внизу страницы

Question

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

body {
  font-family: "Source Sans Pro";
  margin: 0;
  color: #fff; /* Цвет общего текста */
  font-weight: 200;
  background: -webkit-linear-gradient(45deg, #254877 10%, #4b7fc5 90%);
}
a {
  color: #ffa07a;
}
p,
blockquote {
  line-height: 1.6em;
}
p {
  margin: 0 0 2em;
}
blockquote {
  border-left: 1px solid #ddd;
  margin: 0 0 1em;
  padding: 0 0 0 1.5em;
}
h1,
h2 {
  font-weight: 200;
  color: #fff;
}
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.4em;
  margin: 0;
}
.date {
  color: #ccc;
  font-weight: 200;
}
.canvas {
  max-width: 80em;
  margin: 0 auto;
  padding: 0 2em 10em;
}
.page-header {
  padding: 2em 0 1em;
  margin: 0 0 4em;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.page-header h1 {
  margin: 0;
  padding: 0 0 0.2em;
  display: inline-block;
}
.page-header .summary {
  letter-spacing: 0.2em;
  color: #fff;
}
article {
  margin: 0 0 6em;
  padding: 0 0 6em;
  box-sizing: border-box;
  position: relative;
}
article:after {
  content: '';
  display: block;
  position: absolute;
  width: 20em;
  left: 720px;
  font-size: 1em;
  border-bottom: 1px solid #ccc;
  margin-left: -15em;
  bottom: 0;
  z-index: 1;
}
article:last-child:after,
article:last-child:before {
  display: none;
}
@media screen and (min-width: 40em) {
  .sticky .stick {
    position: fixed;
    top: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    opacity: 1;
    width: calc(45% - 5.8em);
  }
  .sticky.hide .stick {
    opacity: 0;
  }
  article {
    position: relative;
  }
  article {
    display: table;
  }
  article .content,
  article header {
    display: table-cell;
    vertical-align: top;
  }
  article .content h2,
  article header h2 {
    margin: 0 0 0.4em;
  }
  article .content {
    font-size: 1.2em;
  }
  article header {
    width: 45%;
    padding-right: 4em;
  }
}
.go-top {
    position: fixed; /* Фиксированное положение */
    left: 10px; /* Расстояние от правого края окна браузера */
    top: 11%; /* Расстояние сверху */
    padding: 25px; /* Поля вокруг текста */ 
	text-decoration: none;
	color: white;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 10px; /* Углы */
}

.go-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

.demo a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.demo a:hover {
  opacity: .5;
}

#section10 a {
  padding-top: 35px;
}
#section10 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
#section10 a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb10 2s infinite;
  animation: sdb10 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Название</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600'><link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="canvas">
  <header class="page-header">
    <h1>Название</h1>
    <p class="summary">описание</p>
  </header>
  <section>
    <article>
      <header>
        <div class="stick">
          <h2>История</h2>
			 	<img src="1.jpg" alt="foto" />
        </div>
      </header>
	  
	  <section id="section10" class="demo">
	  
      <div class="content">
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. </p>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
        <blockquote>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</blockquote>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
      </div>
	  
	  
  <a><span></span></a>
</section>

    </article>
    <article>
      <header>
        <div class="stick">
          <h2>Фото</h2>
        </div>
      </header>
	  <section id="section10" class="demo">
      <div class="content">
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. </p>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
        <blockquote>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</blockquote>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
      </div>
	    <a><span></span></a>
    </article>
    <article>
      <header>
        <div class="stick">
          <h2>Текст</h2>
           текст
        </div>
      </header>
      <div class="content">
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. </p>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
        <blockquote>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</blockquote>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>
      </div>
	  
	  <a href="#" class="go-top">Назад к списку</a>
	  
    </article>
  </section>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js'></script><script  src="./script.js"></script>

</body>
</html>

Answer 1

У вас большие нижние margin заданы для article (6em), а также гигантский нижний padding у .canvas (10em). Если уберёте (или уменьшите) всё это, отступ исчезнет.

Answer 2

"canvas" - у данного класа уберите (настройте) "padding"
У последнего article уберите (настройте) "margin" и "padding"

 article {
    /* margin: 0 0 6em; */
    /* padding: 0 0 6em; */
    box-sizing: border-box;
    position: relative;**
}

Answer 3

Надо настроить поля и убрать их у нижнего блока:

body {
  font-family: "Source Sans Pro";
  margin: 0;
  padding: 0;
  color: #fff; /* Цвет общего текста */
  font-weight: 200;
  background: -webkit-linear-gradient(45deg, #254877 10%, #4b7fc5 90%);
}
.canvas {
  max-width: 80em;
  margin: 0;
  padding: 0 2em 5em;

Теперь должно работать

БЛОГ НА HUSL

Отступ внизу страницы

Ответы (3 шт):