HTML 定位：将 % 和 px 与三个 div 混合答案

【问题标题】：HTML positioning: mix % and px with three divsHTML 定位：将 % 和 px 与三个 div 混合
【发布时间】：2014-07-25 11:40:41
【问题描述】：

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

我想要一个高度为 50 像素的顶部标题和一个高度为 40 像素的页脚。

整个中间应该用div“pad”填充，但它不会填充整个区域。

不知道我的错误在哪里。

而且..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>

【问题讨论】：

如果您需要动态高度，则需要进行计算。如果你的头和脚的高度总是一样的，你可以使用绝对定位来达到同样的效果。

标签： html position footer

【解决方案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;
    }

【讨论】：

啊，谢谢。这似乎有效！但是关于混合 % 和 px 的最后一个问题：如果页脚高 10% 并且您不知道 px 的数量。您如何实现 PAD-div 将区域填充到页脚边界？我试过“margin-bottom：0px;”，但没有任何效果。谢谢！
与示例类似，只要您的页脚高度与您的 PAD 底部定义相同，它将起作用。如果你做了脚高：10%；你的 PAD 应该是底部：10%；这两个都是父元素（主体）的 10%，应用时是相同的数字。

【解决方案2】：

为你的 body 和 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

【讨论】：