[Cappy]

Всем привет и заранее спасибо за помощь.
Решил я сделать сайт.(Просто так, для себя) По ходу работы возникало много проблем, но пока не смог решить только 2:
1. Если меняю размер окна браузера появляется ненужный скроллер на блоке #content.
2. Если размер страниц (Page 1, Page 2...) разный, то внизу страниц, которые меньше максимальной, остается свободное пространство.

Вот ссылка: http://h92177or.bget.ru
И код:
*HTML не вместился, посмотрите по вышеуказанной ссылке*

JS

/*Floating menu*/
$(function(){
       var h_nav = $('#top_nav').outerHeight();
       var top;
	   
       $(window).scroll(function(){
           top = $(this).scrollTop();
           if(($('.firstScreen').outerHeight()-top) <= h_nav){
               $('#top_nav').css('top','0');
           }
           else if(top < $('.firstScreen').outerHeight() && top > 0){
               $('#top_nav').css({'bottom' : top, 'top':''});
           }
           else if(top < h_nav){
               $('#top_nav').css({'top':'','bottom':'0'});
           }
       });
   });     	

/*Smooth scrolling*/
/*Horizontal*/
$(document).ready(function() {

  $('a.go_to').click(function() {

    $('a.go_to').removeClass('selected');
    $(this).addClass('selected');

    current = $(this);

    $('#content').scrollTo($(this).attr('href'), 800);

    return false;
  });

  $(window).resize(function() {
    resizePanel();
  });

});

function resizePanel() {

  width = $(window).width();
  height = $(window).height();

  mask_width = width * $('.content').length;

  $('#debug').html(width + ' ' + height + ' ' + mask_width);

  $('#content, .content').css({
    width: width,
    height: height
  });
  $('#mask').css({
    width: mask_width,
    height: height
  });
  $('#content').scrollTo($('a.selected').attr('href'), 0);

}

/*Vertuval*/
$(document).ready(function(){
    $('.go_to').click( function(){
		
	var scroll_el = $(this).attr('href');
	
        if ($(scroll_el).length != 0) {
	    $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 800);
        }
	    return false;
    });
});

$(document).ready(function() { 
    	$(window).resize(function () { 
      		$("#content").css({"overflow-x":"hidden", "overflow-y":"visible"})
    	}); 
	});

$('#content').on({
    'mousewheel': function(e) {
        if (e.target.id == 'content') return;
        e.preventDefault();
        e.stopPropagation();
    }
})

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100,400&subset=latin,cyrillic);

html, body, .container {
  height: 100%;
}

html, body, h1, p, a, div, section {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font: inherit;
}

/* Основные стили */
body { 
  font: 18px/23px "Roboto", sans-serif;
  color: #ffffff;
  width: 100%;
  overflow-x: hidden;
}

h1 {
  color: #efecec;
  text-transform: uppercase;
  font-size: 40px;
  line-height: 50px;
  font-weight: 100;
  margin-top: 20px;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.container {
  display: table;
  padding-top: 80px;
  width: 100%;
}

.header {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#content {
  background: #fff;
  padding: 20px 0;
  white-space: nowrap;
  display: block;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  position: absolute;
}

#mask {
	display: block;
}

.content {
	display: inline-table;
	width: 100%;
	color: black;
	white-space: pre-wrap;
	position: relative;
}

#content p {
	margin: 10px 2.5%;
	width: 95%;
	text-align: left;
	display: table;
	white-space: normal;
	color: #4B4B4B;
	size: 2rem;
	font-family: roboto;
	font-style: normal;
	font-weight: 400;	
}

h3 {
	margin: 10px 2.5%;
    width: 95%;
}

img {
	max-width: 95%;
	height: auto;
	margin: 10px 2.5%;
}
/*фиксированное плавающее меню*/
#top_nav {
	bottom: 0;
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 50px;
	background-color: #000000;
	color: #ffffff;
	display: table;
	opacity: 0.5;
}

.nav_but {
	margin-left: 1%;
	display: block;
	height: 100%;
	width: 100%;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
	-moz-border-image: -moz-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
	-o-border-image: -o-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
	border-image: linear-gradient(to bottom, white, rgba(0, 0, 0, 0)) 1 100%;
	border-collapse: collapse;
	border-left: hidden;
	font-family: roboto;
	font-style: normal;
	font-weight: 100;
	-moz-user-select: -moz-none;
  	-o-user-select: none;
 	-khtml-user-select: none;
 	-webkit-user-select: none;
	user-select: none;
}

.go_to {
	height: 100%;
	display: table-cell;
}

A:link {
	text-decoration: none;
	color: #ffffff;	
}

A:visited {
	color: #ffffff;
}

A:hover {
	color: aqua;
}

/*Header - Background*/
.firstScreen {
	height: 100%;
	width: 100%;	
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-image: url(../images/background.jpg);
	background-attachment: fixed;
	background-size: cover;
	padding-top: 80px;
	display: table;
 	vertical-align: middle;
  	text-align: center;	
}

@media only screen and (max-width: 2159px) {
    .firstScreen {
        background-image: url(../images/background-2160.jpg);
    }
}

@media only screen and (max-width: 1079px) {
    .firstScreen {
        background-image: url(../images/background-1080.jpg);
    }
}

@media only screen and (max-width: 767px) {
    .firstScreen {
        background-image: url(../images/background-768.jpg);
    }
}