Question

我在定位HTML div时遇到问题：

我想要一个高度为50px的顶级标题和一个高度为40px的页脚。

整个中间应填充div＆＃34; pad＆＃34;但它并没有填满整个区域。

不知道我的错误在哪里。

And..btw ..我真的需要jquery这个米老鼠的东西吗？

</head>
<body>
    <style>

    body{
        margin: 0px;
        padding: 0px;
    }

    #head{
        position: fixed;
        top: 0px;
        height: 50px;
        width: 100%;
        border: solid black 1px;

    }
    #pad{
        position: relative;
        border: solid red 1px;
        top: 50px;
        width: 100%;



    }
    #foot{
        position: absolute;
        border: solid green 1px;
        width: 40px;
        bottom: 0px;
    }

    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        var win_h = $(window).height();
        console.log(win_h);
        $('#pad').height(win_h-90);

    </script>

    <div id="head" >HEAD</div>
    <div id="pad">PAD</div>
    <div id="foot">TOOL</div>

</body>

Answer 1

这是一个使用绝对定位而没有jquery的例子： http://jsfiddle.net/adamfullen/6kqT3/

body{
        margin: 0px;
        padding: 0px;
    }

    #head{
        position: fixed;
        top: 0px;
        height: 50px;
        width: 100%;
        border: solid black 1px;

    }
    #pad{
        position: absolute;
        border: solid red 1px;
        top: 50px;
        bottom: 40PX;
        left: 0;
        right: 0;
    }
    #foot{
        position: absolute;
        border: solid green 1px;
        width: 40px;        
        height: 40PX;
        bottom: 0px;
    }

Answer 2

为您的身体和html添加100％的身高。然后使用calc表达式，您可以为pad分区指定高度。

html,body
{height:100%;}

#head{
    position: fixed;
    top: 0px;
    height: 50px;
    width: 100%;
    border: solid black 1px;

}
#pad{
    position: relative;
    border: solid red 1px;
    top: 50px;
    width: 100%;
    height:calc(100% - 90px);


}
#foot{
    position: absolute;
    border: solid green 1px;
    width: 40px;
    bottom: 0px;
}

DEMO

HTML定位：将％和px与三个div混合

2 个答案: