HTML/CSS - IE의 div에 100 % 높이가 없음

그래, 문제가 생겼어.HTML/CSS - IE의 div에 100 % 높이가 없음

간단한 헤더/내용/바닥 글 레이아웃을 설정하는 데 내가 선호하는 방법을 사용하고 있습니다. 문제는 내 레이아웃의 'content'div에 추가하는 요소를 Internet Explorer에서 100 %로 확장 할 수 없다는 것입니다 (IE의 경우에만 해당). 'content'엘리먼트에 선언 된 높이가 없다는 것을 이해합니다. 그러나 절대 위와 아래를 선언하는 포지셔닝 스타일 때문에 엘리먼트는 원하는 영역을 채 웁니다. (content 요소는 div가 실제로 머리글과 바닥 글 사이에서 채워지는 것을 볼 수 있도록 정의 된 배경색을가집니다.)

제 문제는 div가 명확하게 둘 사이에 확장되어 있기 때문에 왜 그렇습니까? 그 지역을 채우기 위해 아이를 100 %로 설정해야합니까? 누군가 해결책이 있다면, 나는 그것을 듣고 싶습니다. (나는 완전히 다른 레이아웃에 의해 디자인을 포함하지 않습니다 솔루션을 찾고 있어요 .. 또는 적어도 아마도 왜 이런 일이 일어나고 있는지 설명합니다. 나는 높이 선언의 부족 때문에이 시점에서 가정하고 있어요 - -하지만 사업부는 확장되고, 그래서 그것을하지 않음) 여기

페이지에 사용 된 코드입니다 :이 시도

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta name="robots" content="noindex" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>No 100% height on 'content' child div in IE</title> 
    </head> 
    <style> 
    html, body { 
    width:100%; 
    height:100%; 
    margin:0px; 
    padding:0px; 
    } 
    body { 
    position:relative; 
    } 
    #wrapper { 
    position:absolute; 
    top:0px; 
    width:960px; 
    height:100%; 
    left:50%; 
    margin-left:-480px; 
    } 
    #header{ 
     position:absolute; 
     top:0px; 
     left:0px; 
     width:100%; 
     height:200px; 
     background-color:#999; 
    } 
    #content{ 
     position:absolute; 
     top:100px; 
     bottom:50px; 
     left:0px; 
     width:100%; 
     background-color:#F7F7F7; 
    } 
     #content_1{ 
     width:200px; 
     background-color:black; 
     height:100%; 
     float:left; 
     } 
    #footer{ 
     position:absolute; 
     bottom:0px; 
     left:0px; 
     width:100%; 
     height:50px; 
     background-color:#999; 
    } 
    </style> 

    <body> 
    <div id="wrapper"> 
    <div id="header"> 
     </div> 
     <div id="content"> 
     <div id="content_1"> 
      </div> 
     </div> 
     <div id="footer"> 
     </div> 
    </div> 
    </body> 
    </html>

출처

2010-03-23 Jay Are

나를 위해 IE8에서 작동하는 것 같습니다. 호환성 모드로 전환 할 때 검은 세로 막대가 전체 높이가 아님을 알 수 있습니다. – Kevin

문제의 구체적인 예를 제시 할 수 있습니까? 그 아이가 그 지역을 채우지 않는다는 것은 무엇을 의미합니까? 어떤 문제, 구체적으로 관찰하고 있습니까? 한 두 가지 그림이 도움이 될 수 있습니다. – Cheeso

코드와 실제 예제에 대한 링크가 원래 게시물에 포함되었습니다. –

#content_1{ 
width:200px; 
background-color:black; 
height:100%; 
position: absolute; 
}

IE 7을하고! 아래에서 "hasLayout"이라는 값을 위치 지정이 필요한 요소에 지정합니다. 때때로 이런 작은 단점을 해결하기 위해서는 항목에 레이아웃을 강제로 지정해야합니다.이 경우 레이아웃을 절대 위치로 설정해야합니다.

출처

2010-03-23 18:22:42 Peter

와우 - 실제로 작동했습니다! 이 비슷한 코드를 사용하고 있던 사이트에서 요소가 떠 다니기 때문에 절대 위치를 결정하지 못했습니다. 당신은 월 피터 피터입니다! 많은 감사. (남자 - 나는 hasLayout 일이 끝났지 만 ... 내가 틀렸을 것 같아서) PS - 떠있는 경우 div에 hasLayout을 추가하는 간단한 방법이 있습니까? (단지 내가 호기심을 필요로하지 않기 때문에 호기심에서 벗어난다). –

내 고토 hasLayout 스타일은 항상 "zoom : 1;"입니다. –

기꺼이 도와 드리겠습니다! 올바르게 기억한다면 div에서 실제로 아무것도 변경하지 않고 hasLayout 플래그를 트리거하는 여러 가지 방법이 있지만 대부분의 상황이 매우 독특하므로 div가 떠있을 경우 정확히 작동하는 것을 말하기 어렵습니다. 문제의 이름을 알고 나면 대답을 찾기가 훨씬 쉽습니다. – Peter

HTML/CSS - IE의 div에 100 % 높이가 없음

답변

관련 문제