3行布局，扩大中间，最小高度：100％所以当底部有最小的内容时，页脚处于底部

问题描述：

我将如何更改此设置以使中间div垂直扩展以填充空白区域？3行布局，扩大中间，最小高度：100％所以当底部有最小的内容时，页脚处于底部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 

body,td,th { 
    font-family: Tahoma, Geneva, Verdana, sans-serif; 
} 

html,body { 
    margin:0; 
    padding:0; 
    height:100%; /* needed for container min-height */ 
} 

#container { 
    position:relative; /* needed for footer positioning*/ 
    margin:0 auto; /* center, not in IE5 */ 
    width:100%; 

    height:auto !important; /* real browsers */ 
    height:100%; /* IE6: treaded as min-height*/ 

    min-height:100%; /* real browsers */ 
} 

#header { 
    height: 150px; 
    border-bottom: 2px solid #ff8800; 
    position: relative; 
    background-color: #c97c3e; 
} 

#middle { 
    padding-right: 90px; 
    padding-left: 90px; 
    padding-top: 35px; 
    padding-bottom: 43px; 
    background-color: #0F9; 
} 
#footer { 
    border-top: 2px solid #ff8800; 
    background-color: #ffd376; 
    position:absolute; 
    width:100%; 
    bottom:0; /* stick to bottom */ 
} 
</style> 
</head> 

<body> 

<div id="container"> 
    <div id="header"> 
     Header 
    </div> 
    <div id="middle"> 
     Middle 
    </div> 
    <div id="footer"> 
     Footer 
    </div> 
</div> 

</body> 
</html>

请注意我的原题：我将如何改变这个使中间的div垂直扩展，以填补空白？我已经有一个粘脚。 – 2010-05-16 03:56:37

答

你不能得到实际的div来扩大以填补没有Javascript的差距，但你可以很容易地使它看起来这样做。移动规则背景色：＃0F9;从#middle到#container。这会给你你所需要的行为（当内容很少时，它会填补空白，当有很多内容时它会向下扩展，并推动页脚）。

如果你想要Javascript解决方案，下面的代码将工作。简单地说这在你的HTML头部分：

<script type="text/javascript"> 
window.onload = function() { 
    var mid = document.getElementById('middle'); 
    var foot = document.getElementById('footer'); 
    mid.style.height = ((foot.offsetTop+foot.clientHeight)-(mid.offsetTop+mid.clientHeight))+'px'; 
}; 
</script>

确定背景被填满，但#middle没有拉伸。不是我正在寻找的soz – 2010-06-08 10:48:51

你可以用Javascript实现你想要的东西的唯一方法。我用解决方案编辑了我的帖子。这应该做你想要的！ – jackocnr 2010-06-08 12:57:20

答

这是我的备用答案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 

body,td,th { 
    font-family: Tahoma, Geneva, Verdana, sans-serif; 
} 

html,body { 
    margin:0; 
    padding:0; 
    height:100%; /* needed for container min-height */ 
} 

#container { 
    height: 100%; 
} 

#container #header { 
    height: 50px; 
    background-color:#0F6; 
} 

#container #middle { 
    background-color: #66F; 
} 

#container #footer { 
    height: 20px; 
    background-color: #FF3; 
} 

</style> 
</head> 

<body> 

<!-- Apology note to perfectionists: I'm sorry for using tables, but see this: 
    http://stackoverflow.com/questions/1703455/three-row-table-less-css-layout-with-middle-row-that-fills-remaining-space 
    A layout done with this table would be impossible with CSS. --> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="container"> 
    <tr id="header"> 
    <td>h</td> 
    </tr> 
    <tr id="middle"> 
    <td>m</td> 
    </tr> 
    <tr id="footer"> 
    <td>f</td> 
    </tr> 
</table> 


</body> 
</html>

答

#footer { 
    clear: both; 
}

应该到的伎俩。页脚应始终出现在内容最多的列下方。

个人而言，我总是在我的模板添加CSS明确的阶级，并以此作为休息

.clear {clear:both;}

然后：

表将导致您更多的问题比解决的。

这只会将页脚粘在中间部分的下面。我认为他想要的是一个页脚，它始终坚持屏幕底部，除非扩展内容比浏览器高度大。在这种情况下，他希望它出现在扩展内容的末尾。 – Falle1234 2010-05-15 10:52:33

答

我认为你所寻找的有时被称为粘性页脚。

This page解释了它是如何完成的。你要做的是把你的标题和扩展内容放在他提到的包装器中。

我希望这可以帮助您获得您的布局。

这不是我正在寻找的 - 没有粘性的页脚，我可以找到一个不断扩大的中心。 – 2010-05-16 03:55:56

3行布局，扩大中间，最小高度：100％所以当底部有最小的内容时，页脚处于底部

相关推荐