내부 div 최소 높이로 div 내부에서 100 % 높이가 작동하지 않음

div (#child)는 부모 (#parent)의 전체 높이까지 확장되지 않습니다. html 및 body의 높이를 모두 설정했습니다. 부모의 높이를 100 %로 설정하면 부모가 최소 높이를 가지게하고, 부모의 전체 높이까지 확장하려면 부모의 높이를 설정하면됩니다.내부 div 최소 높이로 div 내부에서 100 % 높이가 작동하지 않음

HTML :

<html> 
    <body> 
     <div id="parent"> 
      <div id="child"> 
       <p>This area should be have the same height as it's parent.</p> 
      </div> 
     </div> 
    </body> 
</html>

CSS :

html, body, header, h1, p { margin: 0; padding: 0; } 

html   { background-color: #DDD; height: 100%; } 
body   { background-color: #DAA; height: 100%; } 

#parent { 
    min-height: 70%; 
    height: auto !important; 
    height: 70%; 

    background-color: #AAD; 
} 

#child { 
    height: 100%; /* why isn't this working ? */ 

    width: 80%; 
    margin: auto;  
    background-color: #ADA; 
}

JSFiddle : 당신이 !important; 속성을 제거 할 때 http://jsfiddle.net/nxVNX/11/

출처

2012-06-24 Mihai Rotaru

height: auto !important;

이제까지 !important 사용하지 마십시오 작동합니다. 항상 height: auto;을 사용하기 때문에 작동하지 않았다하지 height: 70%; 대신! 중요한 속성이 규칙은 항상 규칙은 CSS 문서에 나타납니다 어떤 없이 적용됩니다

.

이 줄을 제거하는 것이 좋습니다.
What does !important mean in CSS?에 대해 더 자세한 정보가 필요합니다.

출처

2012-06-24 18:05:54 Sajmon

http://css-tricks.com/snippets/css/cross-browser-min-height/ 여기에서 최소 높이 스 니펫을 선택하고 모범 사례로 간주했습니다. 그 비트로 바이올린 시도조차하지 않았다. 나는 덜 쓸쓸한 것입니다 :)) –

의미가 있습니다. 어쩌면 그게 문제 야? 여러 가지 다른 방법을 시도했지만 작동하지 않았으므로 위의 해결 방법이 유일한 방법 일 수 있습니다. 이 작동하지 않는 이유

출처

2012-06-24 17:58:12

는 잘 모르겠지만,이 오버라이드 (override) 할 수 없기 때문에이 그것으로 일이 harmfull이다,

#parent { 
    min-height: 70%; 
    height: 100% !important; 
    height: 100%; 
    background-color: #AAD; 
}

출처

2012-06-24 18:00:37 sree

내부 div 최소 높이로 div 내부에서 100 % 높이가 작동하지 않음

답변

관련 문제