2009-11-11 2 views
1

예를 들어, mydiv의 높이가 500px 이상으로 커지도록 mydiv에 자식을 삽입 할 수 있습니까?표준 모드에서 자녀가 부모의 크기에 영향을 미칠 수 있습니까?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<body> 
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red"> 
     <!-- place content here --> 
    </div> 
</body> 
</html> 

 

내가 원하는 것을 찾을 수 없습니다. 예를 들어 아래의 상황에서 innerDiv의 높이를 100 %로 지정했습니다. 그것의 부모는 500px 키이며, 따라서 또한 500px 키가 될 것입니다. 최종 결과는 내용이 800 픽셀 높이이며, 내용은 여전히 ​​mydiv으로, mydiv을 넘어 유출 높이 철저한 500 픽셀 :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<body> 
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red"> 
     <img src="myimage.jpg" width="400" height="300" /> 
     <div style="width:100%;height:100%;background:yellow"> 
      hi 
     </div> 
    </div> 
</body> 
</html> 
 

IE는 단점에서 실행 모드가 mydiv가 많은 상황에서 아이를 수용하기 위해 성장하게됩니다 . 표준 모드가 명시 적으로 증가하지 않는 것 같습니다. 항상 그렇습니까?

IE8이 Windows에서 가능한 모든 모드로 실행되는 상태에서 주로 IE8 및 FF3.5에서 테스트하고 있습니다.

답변

3

아니요 : 표준 모드에서 컨테이너의 기본값 인 overflowvisible으로 설정되어 오버플로되는 콘텐츠가 컨테이너의 클리핑 영역 외부로 렌더링됩니다. 자녀의 크기와 일치하도록 컨테이너의 크기를 늘릴 수있는 옵션은 overflow입니다. 오버플로에 대해 더 많이 볼 수 있습니다. here

그러나 어린이 크기에 맞게 컨테이너를 성장시키는 방법이 있습니다. 표준 모드에서 올바른 방법은 height 속성 대신 CSS 속성 min-height을 설정하는 것입니다.

는 동작을 시행 높이가 IE6에서 발생하지 않기 때문에, 사람들은 일반적으로 두 표준을 준수하는 브라우저 min-height 다음 중 하나는 conditional comments 또는 밑줄 _와 속성 이름을 앞에 붙여 IE에 대한 height을 설정 설정 끝 그래서 IE6는 그것을 사용할 것이지만 다른 브라우저들은 그것을 무시할 것입니다.

그래서 사업부 당신은 min-heighthere에 대한 자세한 정보를 찾을 수 min-height IE6에 대한 빠른 구글/빙 검색은 여러분에게 필요한 모든 해답을 줄 것이다

<div id="mydiv" style="width:500px;min-height:500px;_height:500px;border:4px solid red"> 

같은 것입니다.

+0

아마도 내 질문을 문자 그대로 표현했습니다. 제 경우에는 실제로 부모 div가 500px에서 이탈하지 않기를 바랍니다. 자녀가 500px보다 많으면 자녀가 부모를 넘어 엎어지기를 바랍니다. 그것은 표준 모드 브라우저처럼 항상 이것을 시행하는 것 같습니다. 표준 모드 브라우저로 인해 부모가 자라서 자녀를 포용하게된다는 사람들이 알고있는 최악의 경우가 있을지 궁금합니다. 부모님이 자녀를 수용하기 위해 자라기를 원한다면 최소 높이가 길 일 것 같습니다. –

+0

@Matt 죄송합니다! 더 나은 질문에 일치하는 대답을 편집했습니다 (첫 번째 단락 추가) :) –