div 높이 100 %

나는 이것이 백만 시간을 요구 받았다는 것을 알고있다. 그러나 나는 그것이 작동하도록 많은 행운을 얻지 못했다. 나는 Posterous 레이아웃으로 작업 중이다. 나는 5 월 콘텐츠가 흐르도록하려고 노력하고있다. 맨 아래로. 여기 div 높이 100 %

당신은 내용이 center_col 내에서 유지되는 것을 볼 수 layout so far

에 대한 링크, 그래서 나는 기본적으로 거기에 얼마나 많은 콘텐츠에 관계없이 페이지/창 하단에 스트레칭이 열을 필요로 . 레이아웃이 간단 머물려고하는 경우에

이

<!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 최소 높이 속성을 100 %로 설정하십시오. –

그게 무슨 뜻입니까? 전에 ... CSS와 HTML의 기쁨. – Hosemeyer

, 나는 좋은 작은 배경 이미지를 바로 가짜라고 =)

즉하지 않을 경우 여기

는 현재 HTML입니다 , 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

것은 당신이 jQuery를 사용하는 경우 :

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

곳 = "내용"> 당신이 < DIV ID를 복제 할 크기의 사업부입니다 < 사업부 아이디 =

출처

2012-04-10 23:30:21

div 높이 100 %

답변

관련 문제