创建一个固定底部的div，占用剩余的空间

Question

我正在制作一些移动HTML＆amp;想拥有一个占用100％空间的div，但不会耗尽它的容器，并且它有3个div，将它分成3个部分并具有以下布局：

我怎么能用div做这个，我试过但是有百分比和固定高度div是令人困惑的。我可以用水平对齐的方式做到这一点，但垂直方向让我困惑。我不希望它通过使底部绝对而重叠。

修改

剩下的空间基本上只是一个占用整个空间的overscroll-y的大div

我必须将布局放在标题栏下面的部分中，这就是我无法使用position: fixed的原因，因为它会干扰父容器。

Answer 1

首先，您编辑的问题中的图像可能来自JQuery Mobile。考虑使用jQuery mobile。它也可以是一种选择。

<style type="text/css">
    #container{position: relative; width: 100%; height: 100%;  background-color:#ddd; z-index:1;}
    #header{position: fixed; top:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:3;}
    #footer{position: fixed; bottom:0; left:0; width:100%;  height: 80px;  background-color:#f30;z-index:4;}
    #content{width:100%; z-index:5; padding-top: 90px; padding-bottom: 80px;}
</style>

<div id="container">

<div id="header">

</div>

<div id="content">
    Put body content here...

</div>

<div id="footer">

</div>

</div>

你可能需要jQuery来加强它。这应该给你基本的想法。

Answer 2

http://jsfiddle.net/wy6rS/1/

<div id="toolbar">This is fixed toolbar.</div>
  <div id="wrap">
    <div id="header">This is the header</div>
      <div id="content">Content will Expand with scripting. Notice the push.</div>
        <div id="push"></div>
  <div> <!--wrap ends here-->
<div id="footer">This is the footer</div>

推动为粘性页脚腾出空间。请注意#wrap上的负余量。

#wrap { width:100%; min-height:100%; height:100% !important; margin-bottom:-80px; margin-top:50px; }
#toolbar { position:fixed; top:0; width:100%; height:50px; }
#header { height: 140px; }
#content { min-height:300px; height:100%; }
#push, #footer { height:80px; } /* Must be same height as footer */

然后你需要脚本来扩展内容。检查jsfiddle。它将在真实的页面中工作。