Раздел нижнего колонтитула добавить больше, чем обычно, высоту

Проблема здесь заключается в том, что height:100% подачи height:100% до .fullWidth составляет 100% от высоты видового экрана... что означает, что если над ним будет .fullWidth какое-либо содержимое, то он будет расширяться до уровня .fullWidth в окне просмотра, создавая полосу прокрутки. Если вы только хотите визуально увидеть нижний колонтитул, заполняющий оставшееся пространство (между содержимым и нижней частью окна просмотра), здесь я использовал один раз, чтобы подделать его.

Просто сделайте все body тем же цветом фона, что и нижний колонтитул, и поместите остальную часть содержимого в обертку с основным цветом фона. Например, ваш HTML может стать:

<div class="main">
    (Content from before goes in here.)
</div>
<div class="row">
    <div class="large-12 columns footer">footer</div>
</div>

И некоторые измененные/добавленные CSS (следует отметить, что .fullWidth оказывается совершенно ненужным с помощью этого подхода, поэтому вы можете удалить его из своего HTML/CSS):

body{
    background-color:red; /* Footer background colour */
}
.main{
    background-color:#FFF; /* Main background colour */
}
.footer {
    background-color:red;
    margin-top:50px;
    text-align:center;
}

Здесь JSFiddle демонстрирует, как это выглядит. Теперь, если дополнительное пространство ниже нижнего колонтитула, оно не будет восприниматься, если вы не начнете проверять элементы. Если это не то, что вы хотели, вы можете захотеть взглянуть на липкие нижние колонтитулы, как предложили другие.

Надеюсь это поможет! Дайте знать, если у вас появятся вопросы.

попробуй это:

 .fullWidth {
   width: 100%;
   margin:0 auto;
   max-width: initial;
   background-color:red;
   height:100%;
 }

также вам нужно установить высоту для нижнего колонтитула:

 .footer
  {
    margin-top:50px;
    text-align:center;
    height: 50px;
  }