html - 页脚移动到页面顶部？-6ren

html - 页脚移动到页面顶部？

转载作者：行者123 更新时间：2023-11-28 09:14:35

所以问题是我的页脚(应该位于页面底部)移动到页面顶部，就在我的固定页眉下方。

这是我的代码:

    <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto:400,100,300,100italic,300italic:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>



</head>
<style>





h1 { 

    font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 56px; line-height: 56px; color: #555; letter-spacing: -2px;  
  }


  h2 { 

    font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 24px; line-height: 1.3em; color: #5b6064; letter-spacing: -1px;
  }

p { 

    font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8em; color: #5b6064; margin-bottom: 18px;
  }

a { 

    font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.1875rem; 
  }


.header-cont {
    width:100%;
    position:fixed; left: 0%; 
    top:0px;



}
.header {
    height:60px;
    background-color:#ffffff;
    border-width:1px;
    border-bottom-style: solid;
    border-color: #e0e0e0;
    width:100%;



}


  .logo{
    float: left;
    width: 300px;
    height: 100%;
    border-right-style: solid;
    border-width:1px;
    border-color: #e0e0e0;
    background-image: url('hjhjhjk');
    background-repeat: no-repeat;
    background-position: center center;

  }

  .nav{
    float: left;
    width: 100px;
    height: 100%;
    border-right-style: solid;
    border-width:1px;
    border-color: #e0e0e0;

  }

  .login{
    float: left;
    width: 100px;
    height: 100%;
    border-right-style: solid;
    border-width:1px;
    border-color: #e0e0e0;
    text-align: center;


  }

  .kob{
    float: right;
    width: 150px;
    height: 59px;
    border-style: solid;
    border-width:1px;
    border-color: #0099cc;
    background-color: #00b6e7;
    text-align: center;

  }


a:link {
    text-decoration: none;
    color: #787a78;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

  .container{
    max-width: 900px;

    margin: 0px auto; 
  }


  .bullet{
    margin: 60px auto;
    max-width: 900px; 
  }
  .leftimgbullet{
    width: 50%;
    float: left;
    background-image: url('asdasd);

    background-repeat: no-repeat;
    height: 650px;
    margin-top: 50px;
    background-position: center center;

  }

  .righttxtbullet{
    width: 50%; 
    float: left;

    height: 200px;
    margin-top: 0px;

  }

   .kob1{
    float: left;
    padding-right: 5px; 
    padding-left: 5px;
    height: 59px;
    border-style: solid;
    border-width:1px;
    border-color: #0099cc;
    background-color: #00b6e7;
    text-align: center;

  }

.footer{
background-color: #f6f6f6;
width: 100%;
height: 150px;

}



</style>


<div class="header-cont">

  <div class="header"><div class="logo"></div>



    <div class="kob"><div style="margin-top: 18px;"><a style="color: #ffffff;" href="asdasdasd">asdasdasd</a></div></div></div>

</div>


<div class="container">
  <div class="bullet">
<div class="leftimgbullet"></div>
    <div class="righttxtbullet"><h1 style="margin-bottom: 24px;">why is the headline on top of the footer?</h1>
      <h2 style="margin-bottom: 18px;">what is this?</h2>
      <p>asdasdasdasd</p>
      <div class="kob1"><div style="margin-top: 18px; padding-right: 10px; padding-left: 10px;"><a style="color: #ffffff;" href="sss.dk">crazt</a></div>
    </div>

</div>
</div>
</div>

</div>

 <div class="footer"></div>


<script>

  $(function() {

    var $sidebar = $(".header-cont"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                top: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                top: 0
            });
        }
    });

});?

</script>