Question

我在尝试使用固定的顶部导航和粘性页脚工作时遇到问题，而不会将页脚40px从底部隐藏起来。我正在使用的jquery脚本是为了解决这个问题，但事实并非如此。我不能使用bootstrap或类似的东西。所以这是我唯一的选择。

HTML

<div id="container">
<nav role="navigation" id="cssmenu">
<ul>
    <li class="active"><a href="index.html">Home</a></li>

    <li class="has-sub"><a href="pages/courses.html">Courses</a>
        <ul>
            <li><a href="pages/courses/media.html"><span>Digital Media</span></a></li>
            <li><a href="pages/courses/webdev.html"><span>Web Development</span></a></li>
            <li><a href="pages/courses/journalism.html"><span>Journalism</span></a></li>
            <li class="last"><a href="pages/courses/infocomms.html"><span>Information & Communications</span></a></li>
        </ul>
    </li>
</ul>
<div id="wrapper">
    <header role="banner" id="banner">
        <div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064">
            <div class="content-a">
                <div class="content-b">
                    <h1>header1</h1>
                    <h2>header 2</h2>
                </div>
            </div>
        </div>
    </header>

    <div class="content">   


            <main role="main" id="skipnav">

                <p>Intro paragraph</p>




            </main>
    </div>
</div>
    <footer class="footer" id="footer">
        <div class="container2">
        <p>footer</p>
      </div>
    </footer>

</div>

Jquery脚本 -

$(document).ready(function(){
var footer_height=$("#footer").height();
$("#wrapper").css({
    'padding-bottom' : footer_height
});
});

可以找到Css here

可以找到完整的网站here

提前致谢。

Answer 1

你可以使用css而不需要使用jquery

#footer {
 bottom: 0;
 position: fixed;

}
nav {
  top : 0;
 position: fixed;

}

Answer 2

几乎无法改变：

body让padding-top:40px;让身体溢出。所以从身体上移除那个填充物。

和#wrapper需要：

#wrapper {
   position: absolute;
   width: 100%;
   height: 100%;
}

从包装器中删除该jquery部分和填充底线。

并将footer设为position: fixed;

enter image description here

Answer 3

你需要将页脚放在包装内并使用固定在页脚的位置而不是绝对位置;此外，使用jQuery计算填充的唯一原因是你的页脚没有固定的高度（现在你使用高度：40px）。你还需要给你的包装填充顶部=标题的高度。

试试这个：

#footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  left: 0px;
  height: auto;
}
#wrapper { 
  position: relative;
  width: 100%;
  height: 100%;
/* padding: calculated 0 calculated; */

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

使用Jquery修复了顶部导航+粘滞页脚

3 个答案: