div高度100％

我知道这已被问过一百万次，但我没有太多的运气使它工作。我正在制作一个Posterous布局，并且我试图让我的内容可以流动至底部。div高度100％

你可以看到，内容center_col内保存的链接，所以我基本上需要此列可拉伸至页/窗口的底部，无论有多少内容是在那里。

这是当前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 /}&nbsp;{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>

来源

2011-02-26 Hosemeyer

设置#center_col div的包含元素的高度为100％。我测试了这个，它工作！

来源

2011-02-26 22:22:53

或者如果你想让div能够变大，但仍然至少是浏览器窗口的高度，那么将CSS min-height属性设置为100％。 – 2011-02-26 22:25:52

那是什么！我发誓我试过了之前... CSS和HTML的欢乐。 – Hosemeyer 2011-02-26 23:16:32

如果你的布局是要留这个简单，我说的只是一个可爱的小背景图片假货=）

如果不会做，我认为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'; 
}

来源

2011-02-26 21:50:01 Shad

不幸的是，目前，Posterous不允许JS。 :( – Hosemeyer 2011-02-26 21:56:22

如果您正在使用jQuery：

<script type="text/javascript"> 
    $(function(){ 
     var height = $("#content").height(); 
     $("#sidebar").height(height); 
    }); 
</script>

其中< DIV ID = “内容”>是要在< DIV ID复制大小的div = “侧边栏”>

来源

2012-04-10 23:30:21

div高度100％

回答

相关问题