사이드 바가 컨텐트 div의 하단에 도달하지 않습니다

Question

div가 content이고 그 div 내에 sidebar이라는 div가 있습니다. 사이드 바를 content div의 맨 아래쪽으로 늘려야하지만 그렇지 않습니다. 여기에 관련 마크 업 및 CSS는 다음과 같습니다

<div id="content"> 
    <div id="sidebar"> 
     <ul> 
      <li><a href="/register">Register</a></li> 
      <li><a href="/login">Login</a></li> 
      <li><a href="/forgotpass">Forgotten password</a></li> 
     </ul> 
    </div> 
    <form action="login" method="post" id="main-form"> 
     <p class="p-username"> 
      <label for="username">Username</label> 
      <?php echo form_error('username'); ?> 
      <input original-title="Alphanumeric characters, underscores and dashes" type="text" name="username" value="<?php echo set_value('username') ?>"> 
     </p> 
     <p class="p-password"> 
      <label for="password">Password</label> 
      <?php if(isset($error)): ?> 
       <span class="error"><?php echo $error ?></span> 
      <?php else: ?> 
       <?php echo form_error('password'); ?> 
      <?php endif; ?> 
      <input original-title="Please choose a strong password" type="password" name="password"> 
     </p> 
     <p> 
      <input type="submit" class="primary-button" value="Log in"> 
     </p> 
    </form> 
    <div class="clear"></div> 
</div> 

CSS :

#content { 
    width: 960px; 
    border: 1px solid #e7e7e7; 
    margin-top: 10px; 
    border-radius: 5px; 
} 

#sidebar { 
    width: 250px; 
    background: #f5f8fa; 
    float: left; 
    height: 100%; 
    border-right: 1px solid #e0eefb; 
    box-shadow: inset -5px 0px 4px -2px #e8f1f9; 
    margin-right: 10px; 
} 

#sidebar ul { 
    margin:; 0; 
    padding: 0; 
    list-style-type: none; 
} 

#sidebar ul li { 
    line-height: 40px; 
} 

#sidebar ul li a { 
    display: block; 
    width: inherit; 
    padding-left: 20px; 
    text-decoration: none; 
    font-size: 16px; 
} 

그리고 jsFiddle 링크 : 당신이 볼 수있는 http://jsfiddle.net/QXfH3/

, 사이드 바는 마지막 목록 항목 후 중지합니다. divdiv의 맨 아래쪽으로 늘어납니다. 나는 height: 100%을 추가하는 것이 그것을 할 것이지만 분명히 그렇게하지 않을 것이라고 생각했다. height: inherit도 아무런 효과가 없습니다.

감사합니다.

.clear {clear:both} 

높이가 부모 요소에서 상속, 그래서 당신은 추가해야합니다 :

Answer 1

이, #sidebar에 대한 인 #content의 배경 이미지를 설정하는 것입니다 :

#content { 
    background: url(data:image/png;base64,[BASE64-DATA]) repeat-y; /* background-image for #sidebar */ 
} 

는 background, border-right을 제거 및 box-shadow에서 #sidebar :

#sidebar { 
    width: 250px; 
    /* background: #f5f8fa; */ 
    float: left; 
    height: 100%; 
    /* border-right: 1px solid #e0eefb; 
    box-shadow: inset -5px 0px 4px -2px #e8f1f9; */ 
    margin-right: 10px; 
} 

(이 예 #right 단위) div에 오른쪽 열에 대한 전체 내용을 포장이 스타일 적용 : {: 인라인 블록 디스플레이}

이 방법, 당신이없는 #right을 http://jsfiddle.net/QXfH3/5/

당신이이 환상을 얻기 위해, 이미지를 사용하지 않는 경우, 012,362,708,892 :)

라이브 데모을, 얼마나 많은 콘텐츠 당신이 거기에 옮기고 걱정하는이 가장 좋은 방법 인 것 같습니다.

Answer 2

당신에게없는 게

당신은 컨테이너 사업부에 높이 asign해야

body, html {height:100% } 

Answer 3

, 이 경우에는 #content입니다. 높이가 100 %가 아니라면 말이되지 않습니다. http://jsfiddle.net/fS8TB/1/

Answer 4

당신이 찾고있는 것은 고정 유체 레이아웃입니다. 불행하게도, 절대 높이를 지정하지 않고 순수한 CSS에서는 다소 까다로울 수 있으므로 <table>이 가장 좋은 방법 일 것입니다. 그렇지 않으면,이를 달성하기위한 방법은 여기 봐 ...

Fiddle demonstrating fixed-fluid layout