显示隐藏的Div进入我的页脚

Question

使用display: none显示隐藏（jQuery）元素时出现问题。这是我div之前的最后footer，当我显示隐藏的div时，它似乎遇到了我的页脚。

当我在某些屏幕上显示它时，它可以工作（在我的MacBook Pro上完全可以正常工作）。我认为这是某种div高度问题，但我不太确定。我已尝试过StackOverflow上其他高度相关的jQuery问题的各种修复，但似乎找不到适用于我的问题。

我有一个包含4个列表元素的无序列表，在突出显示时，会在其下显示一些其他信息。由于字数统计，4 li个元素的高度不同，因此我将显示设置更改为一分钟以获得它们的高度，它们是：

• 网络128px
• 了解51px
• 推广77px
• 执行77px

这是我正在使用的代码..

HTML

<ul>
 <li id="learn">LEARN</li>
 <li id="promote">PROMOTE</li>
 <li id="network">NETWORK</li>
 <li id="perform">PERFORM</li>
</ul>

<div class="wrapper">
        <div class="innerwrap">
          <div id="learninfo">
            <div class="row">
              <div class="large-12 columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae adipisci assumenda, atque magnam! Quod laboriosam quo reprehenderit deleniti omnis ipsum nulla explicabo eos hic labore, atque pariatur voluptatum earum ut minus repellendus nesciunt voluptas dolorum, natus distinctio architecto? Voluptatibus delectus odio iste voluptate harum officiis eligendi laboriosam mollitia error expedita quas perferendis corrupti natus alias, quam sapiente, magnam repellendus, vitae enim magni. Nesciunt nam odio rerum cumque quibusdam voluptates dolore est quas unde reiciendis. Dolore laborum, fugiat praesentium aperiam quisquam.
              </div>
            </div>
          </div>
          <div id="promoteinfo">
            <div class="row">
              <div class="large-12 columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae adipisci assumenda, atque magnam! Quod laboriosam quo reprehenderit deleniti omnis ipsum nulla explicabo eos hic labore, atque pariatur voluptatum earum ut minus repellendus nesciunt voluptas dolorum, natus distinctio architecto? Voluptatibus delectus odio iste voluptate harum officiis eligendi laboriosam mollitia error expedita quas perferendis corrupti natus alias, quam sapiente, magnam repellendus, vitae enim magni. Nesciunt nam odio rerum cumque quibusdam voluptates dolore est quas unde reiciendis. Dolore laborum, fugiat praesentium aperiam quisquam.
              </div>
            </div>
          </div>
          <div id="networkinfo">
            <div class="row">
              <div class="large-12 columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae adipisci assumenda, atque magnam! Quod laboriosam quo reprehenderit deleniti omnis ipsum nulla explicabo eos hic labore, atque pariatur voluptatum earum ut minus repellendus nesciunt voluptas dolorum, natus distinctio architecto? Voluptatibus delectus odio iste voluptate harum officiis eligendi laboriosam mollitia error expedita quas perferendis corrupti natus alias, quam sapiente, magnam repellendus, vitae enim magni. Nesciunt nam odio rerum cumque quibusdam voluptates dolore est quas unde reiciendis. Dolore laborum, fugiat praesentium aperiam quisquam.
              </div>
            </div>
          </div>
          <div id="performinfo">
            <div class="row">
              <div class="large-12 columns">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae adipisci assumenda, atque magnam! Quod laboriosam quo reprehenderit deleniti omnis ipsum nulla explicabo eos hic labore, atque pariatur voluptatum earum ut minus repellendus nesciunt voluptas dolorum, natus distinctio architecto? Voluptatibus delectus odio iste voluptate harum officiis eligendi laboriosam mollitia error expedita quas perferendis corrupti natus alias, quam sapiente, magnam repellendus, vitae enim magni. Nesciunt nam odio rerum cumque quibusdam voluptates dolore est quas unde reiciendis. Dolore laborum, fugiat praesentium aperiam quisquam.
              </div>
            </div>
          </div>
        </div>
        </div>

CSS

.wrapper {
    position: relative;
    padding-bottom: 50px;
}
.innerwrap {
    position: absolute;
    width: 100%;
}
#learninfo, #promoteinfo, #networkinfo, #performinfo {
    display: none;
    color: #fcb702;
}
#learn:hover, #promote:hover, #network:hover, #perform:hover {
    color: $primary-color;
}

的jQuery

// Learn information display 
$("#learn").hover(function (e){

    //This funciton defines what happens on mouse-in or hover
    $("#learninfo").show();       

    }, function (e) {

    //This function defines what happens on mouse-out or when the hover is over
    $("#learninfo").hide();
});

（^考虑到4 li元素，当然jquery写了4次）非常感谢任何帮助。