1

我正在制作一些移动 HTML 并希望有一个 div 使用它所拥有的 100% 的空间，但不使用它的容器，并且其中有 3 个 div 将它分成 3 个部分并具有以下布局：

在此处输入图像描述

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

编辑

剩余空间本质上只是一个大 div 有一个overscroll-y用完整个空间

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

在此处输入图像描述

4

2 回答 2

2

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

<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 来为这一切增添趣味。这应该给你基本的想法。

于 2013-03-04T16:33:35.857 回答
0

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。它将在真实页面中工作。

于 2013-03-04T16:43:04.873 回答