jQuery Show DIV is overflowing other DIVs (footer)

Question 1

As others have suggested, your footer issue has to do with your content boxes being absolutely positioned on the page.

I noticed that on your demo/fiddle, you're relying on javascript being enabled or that support for your jQuery library is available. To extend your reach, I created a fallback solution that still works with normal HTML and CSS. The reason you'd want to have a fallback for your content is that maybe your user is on a feature phone, or maybe another JS file threw an exception, causing your content to never be displayed. That all said, the CSS and HTML in the demo below will still work even without JS.

In regards to your demo, you can change the jQuery animations as you see fit. I've also manipulated the HTML you provided. I'm not sure if everything has to stay in your original ul list, or if you've got other content you want to put on the page - but based on your filler information, I assumed you had an intention similar to the demo below.

HTML

<div class="container clearfix">
    <div class="nav">
        <ul class="outline">
            <li><a href="#contact" data-target="#contact">Contact Us</a></li>
            <li><a href="#products" data-target="#products">Products</a></li>
            <li><a href="#offices" data-target="#offices">Offices</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="contact" class="content">
            <h2>Contact Us</h2>
            <ul>
                <li>
                    <a href="#">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="#">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="#">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
        </div>
        <div id="products" class="content">
            <h2>Products</h2>
            <p>Purus tortor cras nunc adipiscing cursus ut sociis placerat mattis non montes aliquam aliquet cursus porttitor porta tortor duis porttitor odio. Pid, sit aliquam? Lorem augue eu magnis egestas vut sagittis elit rhoncus massa egestas sociis, in pulvinar a amet, ut adipiscing. Nascetur turpis, turpis pulvinar eu sit.</p>
        </div>
        <div id="offices" class="content">
            <h2>Offices</h2>
            <ul>
                <li>Office 1</li>
                <li>Office 2</li>
                <li>Office 3</li>
            </ul>
        </div>
    </div>
</div>
<div class="footer">
    Footer
</div>

CSS

/* let's make sure we clear floated elements so .footer can behave normally */
.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table;
}

.clearfix:after { clear: both; }

.nav,
.main { box-sizing: border-box; }

.nav {
    float: left;
    width: 30%;
    margin-right: 20px;
    background-color: #ccc;
}

.main {
    float: left;
    width: 60%;
}

.footer {
    background-color: blue;
    color: white;
}

/*
  The .hide class is the key here for fallback.
  If JS is not enabled or working the content will show.
  The nav links will also jump to that section. :)
*/
.hide { display: none; }

jQuery

$(document).ready(function() {
    $('.content').addClass('hide');

    $('.outline a').on('click', function(e) {
        e.preventDefault();
        $('.content').addClass('hide');
        var showContent = $(this).data('target'),
            selector = '.content' + showContent;
        $(selector).removeClass('hide');
    });
});

JSFiddle Demo

Question 2

This is an idea. Do you mind if there footer had a position:relative;, thus always leaving room for the content and keeping the footer away from anything. I never seen a footer change locations, they are pretty much away at the bottom anyway,

See FIDDLE

Question 3

set position property for footer and set as bottom.
You can set display: block using css path.

here the code

.footer {
  width: 100%;
  background: blue;
  color: white;
  position: absolute;
  bottom: 0px;
}
.help-panel {   
position: relative;
}

here the demo

Question 4

You might have to change some markup as well as CSS, as i found some invalid HTML in your case, so let's set your left menu together wrapped by a separate div and take another div as a container!

HTML Markup

<div class="menu">
<ul class="outline">
    <li>
        <div class="heading"><a>Contact Us</a>
        </div>
    </li>
     <li>
        <div class="heading"><a>Products</a>
        </div>
    </li>
    <li>
        <div class="heading"><a>Our Offices</a>
        </div>
    </li>

</ul>
</div>
<div id="contactus" class="content">
    <ul>
        <h1>Contact Us</h1>
        <li><a href="">How to reach us</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">How to email us</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Contact Number</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
    </ul>
</div>
<div id="products" class="content">
    <ul>
        <h1>Products</h1>

        <li>    <a href="">Tabels</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Ladders</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Chairs</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
    </ul>
</div>

<div id="ouroffices" class="content">
    <ul>
        <h1>Our offices</h1>
        <li><a href="">Bristol</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Manchester</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
        <li>    <a href="">Leeds</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </li>
    </ul>
</div>
<div class="footer">Footer</div>

jQuery

$(".content").first().css("display","inline-block");//To show first one on load
$(".heading").click(function () {    
    $(".content").first().show();
    var $this = $(this);
    var divtoShow = $this.text().toLowerCase().split(" ").join(""); // Removes space between text
    $(".content").hide();
    $("#" + divtoShow).css("display","inline-block"); // Added inline style as on show() they will be display:block by default
    return false;
});

Side Note: At the time of an implementation keep one thing in mind that IDs Must be unique,

Fiddle Example