테이블 용 부트 스트랩 3 스크롤 가능 div

테이블 용 부트 스트랩 3 스크롤 가능 div

---

나는 상단에 navbar가 있고 Bootstrap 3의 테이블 클래스를 사용하여 형식이 지정된 테이블을 표시하는 페이지가있는 Bootstrap 3을 사용하고 있습니다. 테이블 (자체 div에 있음)이 스크롤 가능한 페이지의 유일한 부분이되기를 원합니다 (테이블의 데이터 너비 / 높이가 페이지의 너비 / 높이를 초과 할 때). 다음과 같이 테이블의 div 스타일을 지정했습니다.

.mygrid-wrapper-div {
    overflow: scroll;
    height: 200px;
}

나는 이것을 보여주는 바이올린이 있고 스크롤 가능하게하고 싶은 영역을 강조하기 위해 div 주위에 못생긴 5px 빨간색 테두리를 추가했습니다.

http://jsfiddle.net/4NB2N/4/

왼쪽에서 오른쪽으로 스크롤하면 잘 작동합니다.이 작업을 수행하기 위해 아무것도 할 필요가 없으며 창 크기가 조정될 때 div가 자동으로 스크롤바를 조정합니다. 그러나 동일한 방식으로 작동하도록 div의 높이를 설정하는 방법을 모르겠습니다. 200px 값을 하드 코딩했지만 실제로는 div가 창의 "나머지"를 채우도록하여 브라우저의 크기를 조정할 때 여전히 작동하도록하고 싶습니다. .

div가 수평 및 수직으로 동일하게 작동하도록하려면 어떻게해야합니까?

---

스크롤링은 클래스가있는 상자에서 나옵니다. pre-scrollable

<div class="pre-scrollable"></div>

더 많은 예가 있습니다 : http://getbootstrap.com/css/#code-block
도움이 되길 바랍니다.

---

그것을 할 그럼 한 가지 방법은 당신의 몸의 높이를 설정 height당신은 당신이 원하는 것을 page할 수 있습니다. 이 예에서는 600px.

그런 다음 wrapper높이를 여기에서 본문의 백분율로 설정하십시오. 그러면 70%전체 화면을 채우지 않고 대신 지정된 페이지 높이의 백분율 만 차지하도록 테이블이 조정됩니다.

body {
   padding-top: 70px;
   border:1px solid black;
   height:600px;
}

.mygrid-wrapper-div {
   border: solid red 5px;
   overflow: scroll;
   height: 70%;
}

http://jsfiddle.net/4NB2N/7/

jQuery 접근 방식에 대해 업데이트하십시오 .

$(function() {  
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

$( window ).resize(function() {
   var window_height = $(window).height(),
   content_height = window_height - 200;
   $('.mygrid-wrapper-div').height(content_height);
});

http://jsfiddle.net/4NB2N/11/

---

too style = "overflow-y : scroll; height : 150px; width : auto;"를 사용할 수 있습니다. 그것은 나를 위해 작동합니다

참고 URL : https://stackoverflow.com/questions/19639842/bootstrap-3-scrollable-div-for-table