"clear : both"+ "height : 100 %"지난 페이지 하단으로 돌아 가기

Question

CSS는 차가 아니라는 것을 인정합니다. 내 문제는 내가 CSS 속성이 모두 "clear : both"인 요소가있을 때입니다. 및 "높이 : 100 %;" 요소는 실제로 페이지 높이를지나 가게됩니다. 다음은 예입니다. http://jsfiddle.net/d9mv7/

파란색 프레임은 "100 %"에도 불구하고 스크롤바가 나타나 페이지 높이를 초과합니다. "clear : both"속성이 제거되면 예상대로 렌더링됩니다 (JsFiddle은 여전히 ​​불필요한 스크롤바를 추가하지만 일반적으로 렌더링 할 때 그 문제는 없습니다).

내 의도는 페이지 높이의 맨 아래까지가는 div (파란색)를 사용하는 것이지만 측면에서와 같은 방법으로 테두리를 올바르게 그립니다. 문제는 내가 float 속성을 가진 div 위의 컨텐트를 가지고 div가 "clear : both"속성을 올바르게 요구하도록 요구합니다 (픽셀 크기를 하드 코드하지 않고 다른 방법이없는 경우).

위로 가기 (float 요소) 및 아래쪽 div를 추가 div 안에 배치하여 높이가 페이지 대신 해당 div에 비례하도록했습니다. 이것은 오버랩을 더 작게 (그리고 스크롤 바를 더 짧게) 만드는 것처럼 보였지만 멀리 가지 않았습니다. "overflow : hidden;"을 사용합니다. 아직 div와 내용이 스크롤바를 숨기고 바닥을 넘기 때문에 나에게도 효과가 없을 것입니다. 어떻게하면 JavaScript를 사용하지 않고이 문제를 처리 할 것을 제안합니까?

Answer 1

다른 두 포스터가 제안 했으므로 필자는 JavaScript 솔루션으로 끝을 맺었습니다. 누군가 divs의 크기/내용에 대한 가정을하지 않는 CSS 전용 솔루션을 찾을 수 있다면 게시하여 허용 된 답변을 변경합니다. 귀하의 div의 여백/패딩/테두리가있는 경우

가

$('#second-panel').height(document.height-$('#first-panel').height()); 

또는 문제가 충분히 두껍고 그 다음은 내가 (이 jQuery를 사용하지만, 비슷한 논리가 기본 JS 수행 할 수 있습니다) 지금은 그것을 처리하고있어 어떻게 element.height()가 포함되지 않기 때문에) outerHeight를 사용할 수 있습니다.

var secondPanel = $('#second-panel'); 
var borders = secondPanel.outerHeight()-secondPanel.height(); 
secondPanel.height(document.height-$('#first-panel').outerHeight()-borders);