Div가 기본 예제에서 늘리지 않음

다양한 동적 컨텐츠의 높이까지 스트레칭하기 위해 다양한 div가 필요한 사이트가 있습니다. 내가 100 % 높이가 하위 div에서 작동하려면 모든 주변/상위 div가 100 % 높이가되어야 함을 이해합니다.Div가 기본 예제에서 늘리지 않음

나는 HTML과 몸 css에 100 %를 추가했고 모든 것이 끔찍했다. 저는이 문제를 연구하고 해결하기 위해 많은 시간을 할애하여 매우 기본적인 실패한 예제로 만들었습니다.

아무도 설명 할 수 왜

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<style> 
html,body{ 
    height:100%; 
} 
</style> 
</head> 
<body> 
<div style="height:100%; background-color:#00ff00;"> 
    <div style="height:3000px; border:2px solid #ff0000;"> 
     <br style="clear:both;" /> 
    </div><br style="clear:both;" /> 
</div> 
</body> 
</html>

내가 생각하는 것처럼

가 작동하지 않는 이유는 무엇입니까? 내부 div가 부모 div를 늘릴 것으로 기대합니다. 나는 이것이 왜 그런지 이해하지 못한다. 누군가 나에게 이것을 설명하거나 올바른 방향으로 나를 가리킬 수 있습니까? 이 같은 때마다 그것을 왜

덕분에 프로그래밍 웹 응용 프로그램의 10 년 후

출처

2012-09-06 Shane

, 그것은 여전히 나를 위해 혼란. 나는 많은 프로그래머들에게이 문제를 보았다. 설명은 아주 간단합니다.

HTML에서 레이아웃 시스템의 기본 CSS 옵션은 display입니다. display 옵션에는 두 가지 주요 값이 있습니다. 출력에 표시하고자하는 모든 것을 변경합니다. 첫 번째 값은 block이고 두 번째 값은 inline이며 세 번째 값은 언급 된 값의 조합 인 inline-block입니다. display 일부 요소의 값이 블록 인 경우 모든 요소를 가로로 차단하고 요소 옆에 요소를 배치하지 않습니다. 그러나 height이 동일한 작업을 수행 할 수있는 옵션이 없습니다.

지금까지의 당신이 100%에 height 값을 설정하면, 수동으로 값 여백 및 테두리 폭을 계산하는 것을 알고! 당신이 몸 100%에 width 속성 값을 설정할 때 문제가로 body 요소의 기본값 인 margin은 '0'이 아닙니다! 출력물이 엿 같아서 어리 석 게 스크롤됩니다. 따라서 margin을 'body'요소에 '0'으로 설정해야합니다.

또 다른 문제는 여백과 스크롤이 고정되었을 때 'body'요소의 'overflow'속성을 hidden 또는 visible으로 설정하고 '표시'옵션. 높이 계산 공차를위한 백도어! 출력물에서 직접 볼 수 있습니다.

필자는 모든 요소에 'clear'속성을 사용하는 것을 선호하지 않으며 호환성 문제가있는 첫 번째 줄에 관련 'DOCTYPE'(HTML4와 같은)을 사용하는 것이 더 좋을 것입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 
     <style> 
      body 
      { 
       height: 100%; 

       margin:0; 

       overflow:hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <div style="height: 100%; background-color: #00ff00;"> 
      <div style="height: 100%; border: 2px solid #ff0000;"> 
      </div> 
     </div> 
    </body> 
</html>

출처

2012-09-06 11:24:11 Rikki

이 해결 내 문제가하지 않는 것 : 여기

편집 된 버전입니다. 내용이 짙은 div가 필요합니다. 차례로 사용자가 모든 콘텐츠를 볼 수 있도록해야합니다. 위의 예에서는 내부 div의 아래쪽에 테두리가 표시되지 않습니다. 두 div는 브라우저의보기 영역과 동일한 크기 (IE 100 % 높이)로 나타납니다. 내부 하나는 국경 때문에 조금 더 크다, 그러므로 나는 내부 div를 고치기 위하여 기지개를하기 위하여 다른 div (녹색 것)를 필요로 할 것이다. 예를 들어 내부 div가 내용에 가득 찼다면 녹색을 끝까지 맞추기 위해 녹색이 필요합니다. 내용을 스크롤 할 수 있어야합니다. – Shane

Div가 기본 예제에서 늘리지 않음

답변

관련 문제