Question

我有一个名为内容的div，背景颜色为白色。我有一个问题，我让页脚停留在页面的底部，但它是在内容div的顶部。参见pic作为参考。我希望它始终位于内容div下，但如果它缩小，也总是在页面底部。我想要的一个完美的例子是http://www.jquery.com的页脚样式

这是一个演示http://www.andrewhnovak.com/test/index.html enter image description here

HTML

   <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">

        <title>Site Demo</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="css/header.css" rel="stylesheet" type="text/css">
        <link href="css/mainPage.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
    function setnewcontentheight(){     
        $("#inhalt").height(Math.max($(window).height()-$("#footer").height(),$('#inhalt').height()));      
    }

    $(window).resize(function(){
        setnewcontentheight();
    });

    $(document).ready(function() {
        setnewcontentheight();
    }); 
    </script>

    </head>

CSS

 .footer { 
  z-index: 0;
  bottom: 0px;
  height: 40px;
  width: 100%;
  background-color:red;
}


.whiteBox{
    background-color:white;
    width:800px;
    height:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:80px;
    -webkit-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
-moz-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
margin-bottom:100px;
 z-index: 10;
    }

Answer 1

在setnewcontentheight函数中，执行以下操作：

$("div.container:nth-child(5)").height(innerHeight - 40 - $("#footer").height());

（对于nth-child来说有点奇怪，你可能想要用白纸创建一个ID或更容易的选择器。）

推脚在白色背景div下

1 个答案: