IE8 나머지 높이

IE8 (& IE9)에서 이와 같은 구조를 목표로합니다.
자바 스크립트를 사용하고 싶지 않습니다. 일부 타사에서 내용을 동적으로 삽입하고 있기 때문에 다른 스크롤바 크기가 적용됩니다.IE8 나머지 높이

저는 "충분한"시간, 즉 꽤 많은 시간을 찾고 있습니다. 다음 스레드를 이해하거나 사용하지 못했습니다. StackOverflow: make-iframe-to-fit-100-of-containers-remaining-height

<!DOCTYPE html> 
<html> 
    <body> 
     <p>Some text with unknown height, fixed at the top.</p> 
     <div> 
      Some content that will not exceed the body (100% height), 
      but will fill the body until the content is too long, which would give 
      a scrollbar. 
     </div> 
    </body> 
</html>

내가 크롬 (그림 = 전체 브라우저 컨텐츠)에이를 수 있어요, 하단에 피들러 :

Chrome example

IE8/9는 나에게이 (그림 = 전체 브라우저를 제공합니다

IE messes up

: 콘텐츠는 다시 본체의 하부)에 스크롤

누가 나를 도울 수 있습니까?

출처

2012-11-23 EricG

[이 질문은] (http://stackoverflow.com/questions/10294543/overflow-with-absolute-relative-positioning-layout/10297421#10297421), 나는 '돈 약간의 자바 스크립트 없이는 IE8에서 가능하다고 생각하지 않습니다. – thirtydot

흰색 영역이 줄 바꿈 될 수있는 페이지 크기가 조정되면 크기 조정 핸들러 만들기가 필요할 수 있습니다./ – EricG

질문에 대한 답변으로 제안하지 않았습니다. 나는 당신이 해결하려고하는 문제와 동등한 IE8에서 무언가를 만들기 위해 태양 아래 모든 것을 시도하는 질문에 대답하려고 시도하는 동안 기억하고 있음을 의미했습니다. – thirtydot

, 나는 내가 아무도 성공적으로 참으로 내 질문에 해당하는 답변이 없습니다 수도 실현 (결국 JS를 사용하도록 강제하고,이 솔루션은 실제로 질문 중 어떤 밤은). 나는이 여분의 물건을 필요로하기 때문에

JSfiddle

바이올린은 다음과 같습니다 것보다 더 복잡하다. 내가 대답하기 때문에 뭔가 변경하지 않는 한

function adjustHeight() { 

    var header = document.getElementById("header"); 
    var container = document.getElementById("container"); 

    container.style.top = header.clientHeight + "px"; 
} 

// Note the place of the method invocation ('asap'), adjustHeight() 
<body> 
    <div id="header"> 
     <p id="p"> 
      Line1<br/> 
      Line2<br/> 
      Line3<br/> 
      Line4<br/> 
     </p> 
     <div id="toggle">Toggle</div> 
    </div> 
    <div id="container"> 
     <script>adjustHeight();</script> 
     <div id="content"> 
      First row visible<br/><br/> 
      Scrollbar shows normally<br/> 
      Body doesnt scroll<br/> 
      Works on resize too (by default)<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/><br/> 

      Last row visible on collapsed/expanded 
     </div> 
    </div> 
</body>

출처

2012-11-26 10:25:43 EricG

여기서 iframe이 아닌 div를 사용하고있는 것을 볼 수 있습니다. 여기서는 작동해야하는 바이올린이 있습니다. 위치 지정된 요소 사용. 아니 내가 원하는 것을 달성 피로가되는

position:absolute; 
bottom:0px; 
top:80px; 
left:0px; 
right:0px;

은

http://jsfiddle.net/XQbzy/1/

출처

2012-11-23 12:52:16

좋지만 흰색 "헤더"부분은 가변 높이 여야합니다. http://jsfiddle.net/thirtydot/XQbzy/2/ – thirtydot

네, 그렇지 않으면 상단 헤더를 스크롤 가능하게 만듭니다 ... –

IE8 나머지 높이

답변

관련 문제