Question

请协助我修复内容底部的两个卡通人物

CSS现在工作： - 根据建议固定位置底部：http://plungjan.name/test4.html

似乎我没有正确计算它们应该在哪里。

另外一个纯CSS建议会很棒，因为在这种情况下我只使用jQuery来进行单一的定位。

请注意，其中有两个，所以我认为我不能使用页脚胶或足迹或其他任何名称。

  $(document).ready(function(){

     var footerHeight = 0,
         docHeight,
         footerTop = 0,
         $footer = $(".child");

     positionFooter();

     function positionFooter() {

       footerHeight = $footer.height();
       footerTop = ($("#contentcontainer").height()-footerHeight-45)+"px";
/*
      docHeight=$(document).height();
       if (footerTop > (docHeight-footerHeight)) {
         alert("using "+docHeight +" instead of "+footerTop)
         footerTop = (docHeight-footerHeight)+"px";
       } */

       $footer.animate({top: footerTop})
     }
     // $(window).scroll(positionFooter).resize(positionFooter)
  });

Answer 1

为什么不简单地使用

#boy1, #girl1 {
    bottom: 0
}

代替？

更新，更具体地说：首先转到global_styles.css文件。这个用于http://plungjan.name/test2.html。取代

#girl1 {
    position: absolute;
    left: -95px;
    top: 170px;
    z-index: 1;
}

与

#girl1 {
    position: absolute;
    left: -95px;
    bottom: 0;
    z-index: 1;
}

和

#boy1 {
    position: absolute;
    left: 885px;
    top: 175px;
    z-index: 1;
}

与

#boy1 {
    position: absolute;
    left: 885px;
    bottom: 0;
    z-index: 1;
}

不要申请position: fixed。

Answer 2

#boy1, #girl1 {bottom:0px;}

会这样做。

顺便说一下。你应该将#girl1放在#hp_col_1 div之外，就像＃boy1。

CSS或jQuery将div放在视口的底部

2 个答案: