There are 2 ways to get the result you are looking for.

• Using only css , however, you are limited to a certain html / css structure to make it work.
• Using javascript (with css too), where you have better dynamics on your site.

Before leaving for the answer itself, I should warn you that your table has a confusing html. You do not need to create a <tbody> tag for each line, only one is enough, <tr> already works as a "line" definition.

Problem

Now let's get to the problem, itself.

Footer

Your problem with footer occurs because your #divsec is set with a height fixed value of 70%, ie it will always be 70% of the height of the screen, so its footer not fixed at the bottom of the page. Remove this property by leaving #divsec like this:

#divsec {
    max-width:100%;
    max-height:100%;
    position:relative;
    width:60%;
    margin:0 auto;
    text-align:center;
}

Another note, your footer will not need margin-top:-28px; , unless you really need it, but with that it is getting "over" the table, so I recommend removing this property so that it stays immediately below the table.

Menu

As for your menu, it's a bit more complex, using only css , you can use a @media having code similar to this:

.menu {
    width:100%;
    height:40px;
    background:#eee;
    color:000;
}
.menu ul {
    list-style: none;
    margin:0; padding: 0;
    display: none;
}
.menu ul li {
    display: table-cell;
}
.menu:hover .menu ul {
    display: table;
}
span {
    display:inline-block;
    float: left;
}
span:hover ~ ul {
    display:table;
}

@media (min-width:992px) {
    .menu {
        width: 50%;
        margin:0 auto;
    }
    .menu ul {
        display:table;
        width:100%;
    }
    .menu ul li {
        height:40px;
        line-height:40px;
        text-align:center;
    }
    span {
        display:none;
    }   
}

See the example working: link

However, as stated earlier, you are restricted to a html structure, so that it has the view, you should leave the ul tag shortly after the span tag, which is where we enable the menu in responsive layout.

Now to have a more dynamic functionality, I recommend that you look for menu in javascript. There are a number of ready-to-use templates in jQuery , for example.

But this will depend on your willingness to create / use javascript in your project. Since in this case your need is to use only html and css , the answer above should serve. I hope this helps you and drives you to get your results.

Without JavaScript, it's a bit complicated and ugly to do, because you will not be able to use the click, just the CSS3 hover. You will have to create two CSS3 styles for the menu, one for the esktop version and another for the version mobile (nesa you determine from which width you want to change to the mobile menu ..

To do this use:

@media screen and (max-width: 1800px) {  }

Change the amount of pixel you want to switch the menu .. Among the keys you will put the style of the menu (or the whole site, I prefer it) in your mobile version ..

use this video (Spanish) for help: Responsive Menu

You will only need to change, by using the javascript put in CSS .menu_bar (menu class): hover and key padding etc that are in javascript ..

Any questions speak there

EDIT (I made an example for you)

@media screen and (max-width: 1800px) {  
    /* Aqui vai a classe do meu menu */
    .menu_bar {
        display:block;
        margin: 0;
        width:100%;
        height: 60px;
        position: fixed;
        top:0;
        background:#889aae;
        left: -100%;
    }
    /* aqui ele vai mover o meu menu (fazendo ele aparecer) quando eu tiver com o mouse na barra de menu */
    .menu_bar:hover{
        left: 0;
    }
    /* Aqui são as opçoes do meu menu */
    header nav {
        margin-top: -8px;
        width: 75%;
        height: 100%;
        position: fixed;
        right:100%;
        overflow: scroll;
    }

    header nav::-webkit-scrollbar{
            display: none;
    }

    header nav ul li {
            height: 50px;
            display: block;
            margin: 15px;
            text-align: left;
    }
}

See the video to understand better, but on the phone the site will be a bit bad, hence try to use target instead of hover ...

The footer you leave as it should:

footer{
    clear: both;
    margin-top: 10px;

}

Your layout is well done, you used tables to create the body of the page was a plus, having done this, avoided a lot of problems with the placement. Still, the way you positioned the elements, it is very likely that if you did not use a table to contain the body, the same would happen in that area.

In total there are 4 types of positioning, being static , relative , absolute , fixed , among this, only the first 2 are part of the normal positioning.

Static

Elements with the static positon property are organized according to the normal flow of the document, and can not be positioned using top, left, and other properties, ie they act accordingly with the structure defined for them in the normal flow of the page. By default, elements with no position property defined are static .

.cont { background-color:gray; padding:15px; }
.primeiro { background-color:red; top:10px;}
.segundo{ background-color:blue; }
.terceiro{ background-color:orange; }

<section class="cont">
<div class="primeiro">Primeiro</div>
<div class="segundo">Segundo</div>
<div class="terceiro">Terceiro</div>
</section>

Relative

Assigning relative positioning to an element causes it to be positioned relatively to the normal position of this element, ie if we have a relative positioning element, among others with static positioning , the element with relative positioning can assume new positioning, and the static elements will not take it, they will act as if that element were still there.

.cont { background-color:gray; padding:15px; }
.primeiro { background-color:red; position:relative; top:100px;}
.segundo{ background-color:blue; }
.terceiro{ background-color:orange; }

<section class="cont">
<div class="primeiro">Primeiro</div>
<div class="segundo">Segundo</div>
<div class="terceiro">Terceiro</div>
</section> 

# Solution:

The problem in your layout is due to the size of the document you specified, and you are working with a margin of error that varies according to the value of the screen and can vary from 200 ~ 450px height < in> (this, based on the size of my screen) .

html, body {
    font-size: 100%; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    height: 98%;
    background-color:#f9f9f9;
}

This is where this violation happens. Remove the heigth property to fix the problem.

And for footer , simply remove the margin-top property, or change the negative value to any positive, depending on the space you want.

footer {
    position: relative;
    z-index: 1;
    background: #e9e9e9;
    margin-top: 1em;
    padding: 48px 0 28px 0;
}

In this example above, I changed the value -28px to 1em .

Since you are working with tables, the position properties of the constituent elements of the main part , table container, footeer , could work without relative positioning, these and many others properties that are in the style sheet, without performing any important function.