带DIV的连续版式

<div id="top"> 
*height: auto; 
min-height: 100%;* 

    <div id="content"> 
    *min-height: 500px;* 
    </div> 

    <div id="middle"> 
    *css ???* 
    </div> 
</div> 

<div id="footer">  
</div>

当屏幕尺寸正常时，此代码效果不错。但在全屏模式下，页脚到达页面底部（想要的行为），但“中间”div必须增加其高度以获得页脚。我的意思是，这3个元素（内容，中间和页脚）必须是连续的。带DIV的连续版式

我应该使用哪个css规则来执行此行为？

在此先感谢！

UPDATE。我使用了几个CSS规则和工作，但不要在IE8（适用于IE9，Chrome，FF3和FF4）。有关CSS是：

Top{ height: auto; } 
Content{ min-height: 100%; } 
Middle{ overflow: auto; padding-bottom: 130px; } 
Footer{ clear: both; height: 130px; margin-top: -130px; position: relative; }

来源

2011-04-27 CalypsOOO

您是否希望页脚始终保持在屏幕的底部，还是在内容压下时滚动？ – 2011-04-27 14:33:28

@Thomas总是在底部，但不是固定的。 – CalypsOOO 2011-04-27 14:58:10

啊，好吧。查看我关于媒体查询的答案。您可以根据视口高度设置宽度和高度以及任何其他CSS属性。 – 2011-04-27 15:00:00

height:100%;应该是所有需要，使其占用的可用空间。

来源

2011-04-27 14:34:10

您可以尝试使用max或min-height的CSS Media Queries。例如这里：http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html 和文档在这里：http://www.w3.org/TR/css3-mediaqueries/

来源

2011-04-27 14:34:44

由于必需品，我必须避免CSS3 – CalypsOOO 2011-04-27 14:59:52

这太臭了。我知道人们讨厌桌子，但从技术上讲，他们会在这种情况下工作 - 顶部，中部和底部的单元格。在这种情况下，中间的细胞总是会向下伸展以达到底部。 – 2011-04-27 15:02:26

坏消息：说实话，伙计，我不认为这是可能的这个确切的规格。无论如何，这需要一些非常聪明的CSS。但是，表格可以很好地工作。我完全反对这个想法，但是如果这个设计要求是必须的，那么也许你应该走这条路。

一个好消息：根据为什么这是你需要他们是流动的，我们可能会向预期的效果。如果只是为了匹配背景，我们可以做到这一点。更新您的文章与更多的信息，我会（希望）更新我的答案。

来源

2011-04-27 15:19:28

嗨页脚必须粘在底部（但不是固定的），内容div有一个可变的高度，如果内容div太短，中间div必须增长以触摸页脚以避免div之间的空白。我已经使用了一些css规则和工作，但不要在IE8中（适用于IE9，Chrome，FF3和FF4）。请使用我用过的CSS来查看上面的问题。谢谢:) – CalypsOOO 2011-04-28 09:18:47

我需要知道的是为什么你需要成长。如果你正在垂直对齐中间的东西，那么我所知道的方法在没有javascript的情况下将不起作用。如果背景需要伸展以填补空白，那么只要内容不改变垂直对齐，我就可以在那里帮助。那有意义吗？ – 2011-04-29 05:48:29

带DIV的连续版式

回答

相关问题