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％

回答

相關問題