2013-01-17 5 views
0

다음은 HTML의 작은 부분입니다. containerDiv.height 수 textAreaDiv.height 내가 할 그것을하려고IE에서 HTML DIV 높이

<html> 
<body> 
    <div id="containerDiv" style="background-color:red; height: 200px"> 
     <div id="topDiv" style="background-color:green"> 
      <input type="button">1</input> 
     <div> 
     <div id="textAreaDiv" style="background-color:blue;width:100%; height:100%;"> 
      <textarea style="width:100%; height:100%;">123</textarea> 
     </div> 
     <div id="bottomDiv" style="background-color:purple"> 
      <input type="radio" name="Milk" value="Milk">Milk</input> 
      <input type="radio" name="Butter" value="Butter">Butter</input> 
     </div> 
    </div> 
</body> 
</html> 

- (topDiv.height + bottomDiv.height). 이것은 Chrome에서 완벽하게 작동하지만 IE9에서는 작동하지 않습니다. IE9에서 텍스트 영역의 높이는 약 2 문자의 높이입니다. 이 아이디어를 IE9에서 Chrome과 동일한 방식으로 사용하는 방법에 대해 알고 싶습니다. 여기 자바 스크립트와 솔루션입니다 http://postimage.org/image/bfn6bsalv/

UPDATE,하지만 난

<html> 
<head> 
    <script type="text/javascript" src="JQuery-1.7.2.min.js"></script> 
</head> 
<body> 
    <script> 
     $(document).ready(function() {   
      var textHeight = $('#containerDiv').height() - ($('#topDiv').height() + $('#bottomDiv').height());   
      $('#textBox').height(textHeight); 
     }); 
    </script> 
    <div id="containerDiv" style="background-color:red; height: 400px"> 
     <div id="topDiv" style="background-color:green;height:25px;"> 
      <input type="button">1</input> 
     </div> 
     <div id="textAreaDiv" style="background-color:blue;width:100%;">    
      <textarea id="textBox" style="width:100%;">123</textarea>   
     </div> 
     <div id="bottomDiv" style="background-color:purple;height:25px;"> 
      <input type="radio" name="Milk" value="Milk">Milk</input> 
      <input type="radio" name="Butter" value="Butter">Butter</input> 
     </div> 
    </div> 
</body> 
</html> 
+0

어쩌면 내부 DIV의 높이를 각각 특정 높이로 지정하여 각각의 DIV의 200px까지 합칠 수 있습니까? 그런 다음 textarea에 부모 DIV와 동일한 높이를 지정하십시오 (패딩 및 테두리를 고려해야한다는 것을 기억하십시오.) CSS 리셋 파일을 사용하여 시작하기 전에 여백/패딩을 모두 제거하기를 바랍니다. –

+0

사용자 정의 asp.net 컨트롤에 대한 html을 생성합니다. 따라서 사용자가 containerDiv 높이 및 너비를 설정하고 그에 따라 다른 div의 크기를 조정해야합니다. – BlueChameleon

+0

Chrome에서 올바르게 렌더링했지만 Chrome에서 설명하는 내용이 표시되지 않습니다. [나를 위해] (http://jsfiddle.net/4H4bL/), Chrome과 IE9의 유일한 차이점은 Chrome의 '텍스트 영역'이 몇 픽셀 더 짧다는 것입니다. 내가 틀렸다면 수정하십시오. 달성하고자하는 것은 [this] (http://jsfiddle.net/4H4bL/1/)이지만 정확한 픽셀 높이를 설정하지 않아도됩니다. – MiniRagnarok

답변

0

내가 '순수 CSS의 솔루션처럼 여전히 것 : 여기

내가 얻고 무엇의 화면 캡입니다 당신이 일하는 것을 찾았 기 때문에 기쁩니다. 왜 내가 작동하지 않는지 알게 해주고 싶었어. 코드가 유효하지 않습니다. topdiv의 닫기 태그에 슬래시가 누락되었습니다.