Html div 高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5129906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div height 100%
提问by Hosemeyer
I know this has been asked a million times, but I haven't had much luck making it work.I'm working on a Posterous layout, and I'm trying to get my may content to flow to the bottom.
我知道这已经被问了一百万次，但我没有太多运气让它工作。我正在研究海报布局，我试图让我的可能内容流到底部。
Here is a link to the layout so far
这是迄今为止布局的链接
You can see that the content is held within center_col, so I basically need this column to stretch to the bottom of the page/window regardless of how much content is in there.
你可以看到内容保存在 center_col 中，所以我基本上需要这个列延伸到页面/窗口的底部，不管那里有多少内容。
Here is the current HTML:
这是当前的 HTML：
<!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>
回答by Web_Designer
Set the height of the containing elements of the #center_col div to 100%. I tested this and it worked!
将#center_col div 的包含元素的高度设置为 100%。我对此进行了测试，并且有效！
回答by Abel Dantas
If you are using jQuery:
如果您使用 jQuery：
<script type="text/javascript">
$(function(){
var height = $("#content").height();
$("#sidebar").height(height);
});
</script>
where < div id="content" > is the div with the size you want to replicate in < div id="sidebar" >
其中 <div id="content"> 是您要在 <div id="sidebar"> 中复制的大小的 div
回答by Shad
If your layout is going to stay this simple, I say just fake it with a nice little background image =)
如果您的布局要保持如此简单，我说只需用漂亮的小背景图片来伪造它 =)
If that won't do, I think JS is your only way to go. e.g.
如果那不行，我认为 JS 是你唯一的出路。例如
window.addEventListener('load',fit,false);
window.addEventListener('resize',fit,false);
function fit(){
var myHeight;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
document.getElementById('content').style.height=myHeight + 'px';
}
