jQuery Show DIV溢出其他DIV(页脚)

正如其他人所建议的,页脚问题与内容框在页面上的绝对位置有关。

我注意到,在您的演示/fiddle上,您依赖于启用javascript或对jQuery库的支持。为了扩展您的范围,我创建了一个仍然适用于普通HTML和CSS的回退解决方案。您希望对内容进行回退的原因是,可能您的用户正在使用功能手机,或者另一个JS文件引发了异常,导致您的内容永远无法显示。尽管如此,即使没有JS,下面演示中的CSS和HTML仍然可以工作。

关于演示,您可以根据需要更改jQuery动画。我还操纵了您提供的HTML。我不确定是否一切都要保持原样 ul 列表,或者如果您有其他内容想放在页面上,但根据您的填充信息,我假设您的意图与下面的演示类似。

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

这是一个想法。你介意页脚有一个 position:relative; ,因此始终为内容留出空间,并使页脚远离任何内容。我从来没有见过页脚改变位置,反正它们离底部很远,

看见 FIDDLE

1. 设置页脚的位置属性并设置为底部。

2. 您可以设置 display: block 使用css路径。

这里是代码

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

这里是 demo

您可能需要更改一些标记以及CSS,因为我在您的案例中发现了一些无效的HTML,所以让我们将左菜单设置为用单独的 div 再来一杯 第二部分 作为容器!

HTML标记

<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;
});

边注: 在实施时,请记住一点: ID(ID) 必须是 唯一的 ,

Fiddle Example