높이를 설정하지 않고 div 스크롤 가능하게하기

Question

div를 하드 코딩하지 않고 스크롤 할 수있게 만드는 방법은 무엇입니까? 일반적으로 div를 스크롤 할 수있게 만들려면 최대 높이를 설정해야합니다. 그렇지 않으면 확장됩니다.

#element { 
    overflow:auto; 
    max-height: 100px; 
} 

필자의 경우 높이를 부모 높이 (부모는 크기 조정 가능)로 제한하고 CSS에서는 높이를 설정하고 싶습니다. http://jsfiddle.net/mbrnwsk/58qSc/1/

Answer 1

에 패딩을 추가해야합니다 코멘트를 잘 작성은 #title 요소의 경우 CSS 또는 JS로 할 수 있습니다. CSS 솔루션은 간단하지만 올바르게 맞춰 지도록 top의 오프셋을 조정해야합니다. 다른 세 개의 오프셋 (왼쪽, 아래 및 오른쪽)을 0으로 설정함으로써 #content 요소가 완전히 펼쳐지도록합니다.

#parent { 
    border: 3px solid; 
    height: 150px; 
    position: relative; 
} 
#content { 
    overflow-y: auto; 
    overflow-x: hidden; 
    background: cyan; 
    top: 16px; /* This is based on the assumption that #title has a height of 16px */ 
    right: 0; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
} 

더 많은 응답 솔루션을 http://jsfiddle.net/teddyrised/58qSc/3/

---

, 당신은 #title의 높이를 가져 오기 위해 JS에 의존해야하고 #content의 top 속성에 따라 —이의 장점은 설정됩니다 뷰포트 크기가 변경 될 때 또는 높이가 #title 인 경우에도 잘 반응합니다.

CSS의 경우 위와 동일하지만 top 선언을 삭제합니다. 대신, 우리는 대신 JS이 위임 :

• 그것은 응답 — 항상 바인딩에 의해 top을 다시 계산할 수 있습니다 :

  $(function() { 
      $("#parent").resizable(); 
  
      // Function to set height 
      var setContentHeight = function() { 
       $('#content').css('top', $('#title').outerHeight()); 
      } 
  
      // Recalculate when viewport changes 
      // You can also bind this function to events that manipulate the dimension of #title 
      $(window).resize(setContentHeight); 
  
      // Run once when DOM is ready 
      setContentHeight(); 
  }); 
  

  이

  http://jsfiddle.net/teddyrised/58qSc/4/

  JS 기반 솔루션의 장점은 즉 setContentHeight() 당신이 예상 할 수있는 모든 이벤트 기능은 #title의 크기를 변경합니다.

• 패딩, 여백, 높이 (최소, 최대 또는 높이), 줄 높이 #title 또는 해당하는 자식 (있는 경우)을 변경할 때 top 값을 수동으로 업데이트하지 않아도됩니다.

Answer 2

height:100%; 

그것이 동일한 부모 높이로 설정한다 : 여기서

는 JSFiddle이다.

는 here

편집을 참조하십시오 : 부모 뺀 높이의 나머지 공간을 채우기 위해 스트레칭하는 #content 위해서는 부모

#parent {padding-bottom: 1em;}