유체 상위 높이를 채우기위한 목록 항목 높이 설정

Question

유체 폭 정렬되지 않은 목록 (너비 : 30 %)과 유체 너비 블록 (내용 : 너비 : 70 %)이 포함 된 유체 너비 div (너비 : 100 %) 오른쪽에 위치합니다. 내용 블록이 정렬되지 않은 목록의 높이를 초과하므로 컨테이너 높이를 채우기 위해 각 목록 항목의 높이를 늘리고 싶습니다. 분명히 25 %의 높이가 작동하지 않을 것이지만 내가 찾고있는 것입니다. 나는 붙어있다. 어떤 제안?

<div id="container"> 
    <ul id="tabs"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
    </ul> 
    <div id="content"> 
     <p>Lorem ipsum dolor sit amet...</p> 
    </div> 
</div> 

당신은 당신의 순서가없는 목록 (폭 : 30 %)에 정적 배경을 추가하여 시도 할 수

Answer 1

당신이 당신의 HTML에 별도의 컨테이너를 추가하고자하는 경우

<div id="container"> 
    <div id="tabs-wrapper"> 
     <ul id="tabs"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </ul> 
    </div> 
    <div id="content"> 
     <p>Lorem ipsum dolor sit amet...</p> 
    </div> 
</div> 

이 그럼 당신은 순수 CSS로 맞게 크기에 리튬 요소를 display: table; 및 display: table-row;의 마법을 사용할 수 있습니다.

tabs-wrapper 요소를 중심으로 position: absolute;을 사용하고 각 측면의 범위를 원하는 곳으로 선언하여 기본 컨테이너의 높이를 채우는 'stretch'방법을 사용했습니다.

#container { 
    position: relative; 
} 
#tabs-wrapper, #content { 
    display: inline-block; 
} 
#tabs-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 70%; 
    bottom: 0; 
} 
#tabs { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
#tabs li { 
    display: table-row; 
} 
#content { 
    width: 70%; 
    margin-left: 30%; 
} 

저는이 작업을 매우 빠르게 처리하여 좀 더 효율적으로 수행 할 수 있다고 확신합니다. 지옥, 너는 충분히 그것으로 주변에 놀면, 여분 품목 성분을 제거 할조차 수있어조차 모른다. 당신이 바이올린을 만들 수 있습니다

http://jsfiddle.net/Dx4L8/

Answer 2

: 이런 종류의, 바닥 글,

또한

#your_tab_id_here:before { 
    content: ""; 
    display: block; 
    width:30%; 
    position: fixed; 
    bottom: 0; 
    top: 0; 
    z-index: -9999; 
    background-color: #cccccc; // same with the background of your tabs 

}이 같은 접근법의, 그냥 바닥에 끈적 거리는 만들려고 :) See my JSFiddle Here

jQuery로

Answer 3

:

var adjustHeight; 

$(document).ready(function() { 
    var $tabs = $('#tabs'); 
    var $content = $('#content'); 

    adjustHeight = function() { 
     var tabsH = $tabs.height(); 
     var contentH = $content.height(); 
     if(contentH > tabsH) { 
      $tabs.height(contentH); //set height if greater than tabs 
     } else { 
      $content.attr('height', ''); //remove height if one has been set 
     } 
    } 

    adjustHeight(); 

    // If the #content height changes, you need to rerun adjustHeight() 
}); 

이 코드는 때 페이지가 처음로드를 실행합니다. 페이지로드 후 #content 높이가 변경되면 (예 : 콘텐츠가 ajax를 통해 변경되는 경우) adjustHeight()을 실행하는 콜백을 설정해야합니다.