力绝对定位的div不重叠

我有一个使用position:absolute;定位在头吧，我似乎无法得到它的不重叠我的内容。力绝对定位的div不重叠

enter image description here

这里是我使用我的例子中的HTML：

<div class="ui-page ui-page-active"> 
    <div class="ui-header"> 
     <div class="ui-title ui-title-h1"> 
      Page Title 1 
     </div> 
    </div> 
    <div class="ui-content"> 
     <a href="#pg-two">Page Two</a> 
    </div> 
    <div class="ui-footer"> 
     <div class="ui-title ui-title-h3"> 
      Page Footer 1 
     </div> 
    </div> 
</div>

，这里是我的CSS

html,body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
.ui-page { 
    background-color: #bbb; 
    height: 100%; 
    width: 100%; 
    display: block; 
    position: relative; 
} 
.ui-page-inactive { 
    display: none; 
} 
.ui-page-active { 
    display: block; 
} 
.ui-header { 
    position: absolute; 
    top: 0; 
    background-color: #000; 
    width: 100%; 
    display: inline-block; 
} 
.ui-content { 

} 
.ui-footer { 
    position: absolute; 
    bottom: 0; 
    background-color: #000; 
    width: 100%; 
    display: inline-block; 
} 
.ui-title { 
    text-align: center; 
    color: #fff; 
    padding: 4px; 
    line-height: 150%; 
} 
.ui-title-h1 { 
    font-size: 1.5em; 
    font-weight: 900; 
}

我的最终目标是拥有一个标题栏总是在顶部，一个页脚栏总是在底部，内容填充中心。内容div不实际上需要填写100％，我只是不希望它被页眉或页脚阻止。

来源

2011-09-28 rlemon

整个事情是否应该适合浏览器窗口的大小？ – thirtydot

100％宽度，100％最小高度|但高度可以扩大到+ 100％的视口。这将在移动设备上查看。 – rlemon

一个简单的方法是将.ui-content设置为您的标题的高度，将padding-top或margin-top（我不确定是哪个），这会将.ui-content向下推不重叠。

来源

2011-09-28 19:10:01

我希望不必这样做。有没有显示性质的组合，将允许我做我在找什么？ – rlemon

有几种方法可以完成你想要做的事情，我说的是最简单的方法。另一种方法是将所有div浮动到左侧，然后标题将保持在最前面。另一种方法是将ui内容绝对定位，并且可能有十几种方法可以实现。但我不知道有什么魔法组合会阻止它们重叠。有点顶部填充/边距有什么问题？ –

没什么。你知道什么时候你脑海中有了一个想法。你想做一些没有或没有特定标准的事情......但是没有真正的推理呢？ – rlemon

如果页眉和页脚是固定高度（例如“80px”），那么您可以使用绝对顶部和底部边距（position：absolute; overflow-y：scroll; top ：80px; bottom：80px;）并使页眉和页脚固定（position：fixed; height：80px; top：0; left：0; right：0; overflow：hidden;为标题和位置：fixed; height： 80px; bottom：0; left：0; right：0; overflow：hidden;对于页脚）

类似的东西可能会有效。

来源

2013-04-09 23:00:41 Amanda

力绝对定位的div不重叠

回答

相关问题