2011-04-10 387 views
0

我有两个绝对定位的元素。他们需要被绝对定位,因为他们利用左右。上面的一个也使用顶部,下面的一个没有余量,因此在向下滚动后会“连接”到浏览器窗口的底部。对于上面的一个,我使用最小高度来保持我想要的风格,但如果需要它(如动态内容或小型显示器),仍然无法防止它增长。我怎样才能确保下面的元素总是低于上面的?放置一个位于另一个下方的absulte元素

我正在寻找一个解决方案,无javascript工作。

+0

好吧,你编辑你的帖子,所以应该在下一个始终绑定到浏览器窗口的底部? – 2011-04-10 17:11:31

回答

2

我会打电话给你的两个元素header-div和content-div。尝试在他们周围添加一个包装div。那么你的HTML应该是这样的:

<div id="wrapper"> 
    <div id="header"> 
    </div> 

    <div id="header"> 
    </div> 
</div> 

现在的位置您wrapper绝对使用从你的头-DIV的值:

#wrapper { 
    position: absolute; 
    top: yourvalue; 
    left: yourvalue; 
    right: yourvalue; 
} 

,然后添加一些样式为你的头,设置最小高度:

#header { 
    min-height: yourvalue; 
} 

现在你可以在内容中使用的利润率,来定位它,你想怎么的,例如,如果你的头应该有left: 350px;和内容left: 300px;,你可以使用

#content { 
    margin-left: -50px; 
} 

希望这是你所需要的;)

相关问题