Html 分区高度100%
我知道这个问题已经被问过无数次了，但我没有太多的运气让它起作用。我正在做一个Posterous布局，我正试图让我的五月内容流到底部 这里有一个链接到 您可以看到，内容保存在中间位置，因此我基本上需要将此列延伸到页面/窗口的底部，而不管其中有多少内容 以下是当前的HTML：Html 分区高度100%,html,css,layout,posterous,Html,Css,Layout,Posterous,我知道这个问题已经被问过无数次了，但我没有太多的运气让它起作用。我正在做一个Posterous布局，我正试图让我的五月内容流到底部 这里有一个链接到 您可以看到，内容保存在中间位置，因此我基本上需要将此列延伸到页面/窗口的底部，而不管其中有多少内容 以下是当前的HTML： <!DOCTYPE html> <html> <head> <title>{Title}</title> <meta h
<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}/* mac hide \*/
html { height: 100%;}
* html #wrap {height: 100%;}/* end hide */
body {
background: #FFFFFF;
color: #fff;
height:100%;
min-width:800px;}
#inner {
position:relative;
width:100%
}
#wrap {
min-height: 100%;
margin-left:50%;
position:relative;
background:#F9F9F9;
color:#000;
z-index:1
}
#center_col {
float: left;
width: 800px;
height: auto;
margin-left:-380px;/* drag it central on the page*/
position:relative;
display:inline;/* ie double margin bug*/
background:#FFFFFF;
}
#sidebar {
width:204px;
height: 100%;
padding-right:26px;
float:left;
min-height:234px;
position:relative;
background: #FFFFFF;
}
#content {
width:570px;
height: 100%;
min-height: 100%;
position:relative;
float:left;
background: #F9F9F9 url('http://www.rockettree.com/images/bg-content.png') left top repeat-y;
padding-top:21px;
padding-bottom:48px;
}
.postunit {
width: 500px;
margin-left: 30px;
padding: 10px 5px 20px 5px;
background: #FFFFFF;
border: 1px solid #F9F9F9;
}
.sidebar {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 50px;
padding-left: 10px;
float: left;
height: auto;
width:200px;
-moz-border-radius: 10px;
border-radius: 10px;
}
p{
padding:5px;
margin-bottom:1em;
}
</style>
<!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 802 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 802 ? "802" : "auto") : "802px") : "auto" );}</style><![endif]-->
</head>
<body>
<div id="wrap">
<div id="inner">
<div id="center_col">
<div id="sidebar">
<div class="header">
<h1>{Title}</h1>
<p>{Description}</p>
</div>
{block:ListSidebar}
<div class="profile">
<a href="{ProfileLink}">
<img src="{PortraitURL-45}" width='75' height='75'>
</a>
<p>{Profile}</p>
</div>
{/block:ListSidebar}
</div>
<div id="content">
<div class="posts">
{block:Posts}
<div id="postunit_{PostID}" class="postunit">
{block:EditBox/}
<div class="post">
<h3><a class="posttitle" href="{Permalink}">{Title}</a></h3>
<a class="button" href="{Permalink}">Posted {TimeAgo}</a>
{Body}
</div>
{block:Responses}
{block:ResponsesList}
{/block:ResponsesList}
{block:Sharing}
{block:Tweet /} {block:FbLike /}
{/block:Sharing}
<div class="postresponses">
<a class="button" href="#">{ResponseCount} Response{ResponseCountPluralized}</a>
</div>
{block:ResponsesShow}
{Responses}
{ResponseForm}
{/block:ResponsesShow}
{/block:Responses}
</div>
{/block:Posts}
</div>
{block:Pagination/}
</div>
</div>
</div>
</div>
</body>
</html>
{Title}
*{边距：0；填充：0}/*mac隐藏\*/
html{高度：100%；}
*html#wrap{高度：100%；}/*结束隐藏*/
正文{
背景：#FFFFFF；
颜色：#fff；
身高：100%；
最小宽度：800px；}
#内在的{
位置：相对位置；
宽度：100%
}
#包裹{
最小高度：100%；
左边距：50%；
位置：相对位置；
背景#F9F9F9；
颜色：#000；
z指数：1
}
#中柱{
浮动：左；
宽度：800px；
高度：自动；
左边距：-380px；/*将其拖动到页面中央*/
位置：相对位置；
显示：内联；/*即双边距错误*/
背景：#FFFFFF；
}
#边栏{
宽度：204px；
身高：100%；
右边填充：26px；
浮动：左；
最小高度：234px；
位置：相对位置；
背景：#FFFFFF；
}
#内容{
宽度：570px；
身高：100%；
最小高度：100%；
位置：相对位置；
浮动：左；
背景：#F9F9URL（'http://www.rockettree.com/images/bg-content.png'）左上重复-y；
填充顶部：21px；
填充底部：48px；
}
.postnit{
宽度：500px；
左边距：30px；
填充：10px 5px 20px 5px；
背景：#FFFFFF；
边框：1px实心#F9F9F9；
}
.侧边栏{
边框：1px实心#000000；
背景色：#FFFFFF；
边缘顶部：50px；
左侧填充：10px；
浮动：左；
高度：自动；
宽度：200px；
-moz边界半径：10px；
边界半径：10px；
}
p{
填充物：5px；
边缘底部：1米；
}
{Title}
{说明}
{block:ListSidebar}
{Profile}
{/block:ListSidebar}
{block:Posts}
{block:EditBox/}
{Body}
{块：响应}
{block:ResponsesList}
{/block:ResponsesList}
{块：共享}
{block:Tweet/}{block:FbLike/}
{/block:共享}
{block:responseShow}
{Responses}
{ResponseForm}
{/block:responseShow}
{/block:Responses}
{/block:Posts}
{块：分页/}
将#center_col div包含元素的高度设置为100%。我测试了这个，它成功了 如果您正在使用jQuery：
<script type="text/javascript">
$(function(){
var height = $("#content").height();
$("#sidebar").height(height);
});
</script>
$（函数（）{
变量高度=$（“#内容”）.height（）；
$（“#侧边栏”）。高度（高度）；
});
其中
是您希望在