리베팅 수직 공간을 채우기 위해 Div

Question

복잡한 HTML 애플리케이션이 있으므로 불행히도 코드 샘플을 제공 할 수 없습니다. 우리는 나머지 수직 공간 (이미지 참조)을 채우기 위해 div (빨간색으로 강조 표시)를 얻으려고합니다. (: 수평 구성 요소가 제대로 크기를 조정 참고)

응용 프로그램 (검은 색)에 헤더 해고하거나 크기를 조정할 수 있습니다 왼쪽의 사이드 바 구성되어 있습니다. 사이드 바 오른쪽에는 다른 div (mainDiv)가 있습니다. mainDiv에는 컨트롤의 맨 위에 div가 있고 그 아래에 데이터 테이블에 대한 div가 있습니다 (빨간색으로 강조 표시됨).

이 테이블에는 잠재적으로 많은 양의 데이터가 포함될 수 있으므로 데이터가 화면에 맞지 않으면 자체 스크롤바가 필요합니다.

테이블을 사용 가능한 가로 및 세로 공간을 모두 채우면됩니다. 우리는 단지 그것을 작동시키는 것처럼 보이지 않습니다.

jsfiddle 예제를 사용하여 가능한 한 최대한 레이아웃을 보여줍니다. 이것은 here으로 볼 수 있습니다. 우리는 남은 공간을 모두 차지하기 위해이 div (jsfiddle에서 div는 "tablewrap"이라고 함)를 원합니다. 다음과 같이

코드 (jsfiddle에서)입니다 :

HTML

.header { height: 50px; background:black; color:white; } 
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; } 
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;} 
.tableheader-controls-etc { height:150px; background:blue; color:white; } 
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;} 

사람이 좋은 것 솔루션을 제공 할 수있는 경우

<div class="header">Header</div> 
<div class="sidebar">This is the sidebar</div> 
<div class="tablewrapper"> 
    <div class="tableheader-controls-etc"></div> 
    <div class="tablewrap">table</div> 
</div> 

CSS. 우리는 CSS를 선호하지만 Javascript에 대처할 수 있습니다.

감사합니다, 필

Answer 1

트릭은 position: absolute을 설정하는 것입니다 (당신이 원하는대로 최소 높이를 설정), bottom, left 및 right 속성을 필요에 따라 선택합니다. fiddle 및 explanation을 참조하십시오.

.tablewrap { 
    position: absolute; 
    top: 240px; 
    bottom: 0; 
    left: 150px; 
    right: 40px; 
    height: auto; 
    width: auto; 
    ... 
} 

Answer 2

당신이 시도 할 수 있습니다 :

.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px} 

는 다음 상단을 조정

Answer 3

음, 듣고 싶지 않을 것 같은 말을 할 시간입니다. CSS로 할 수는 없습니다. 당신이 그 두 개의 높이를 알게되면

1. 뷰포트의 높이
2. 컨트롤 DIV 높이

, 당신이 당신의 테이블 높이를 설정할 수 있습니다

당신은 두 가지를 발견하기 위해 자바 스크립트를 사용해야합니다 받는 사람 :

finalHeight = viewport - (controls+header+footer) 

머리글과 바닥 글의 높이가 동적 인 경우 jav 그들을 계산하기 위해 ascript.

또한 창 크기를 조정할 때이 높이를 다시 계산해야합니다. 물론 자바 스크립트가 비활성화되어 있으면 레이아웃이 작동하지 않습니다.