요 며칠 동안 HTML의 지식을 배웠는데 오늘은 아주 간단한 페이지를 만들고 싶다. 바로 머리, 내용과 밑부분으로 나뉜다. 원래는 세 개의div를 사용하면 되지만div의 높이를 백분율로 설정할 때 효과가 나타나지 않고 구체적인 페이지의 유선은 매우 간단하다.
다음은 html 섹션입니다.

		

			11111111
		
		

			2222222222
		
		

			33333333
		
	

세 개만div,div는 블록급 요소로 너비는 기본적으로 벌어지고, 높이를 설정하지 않으면 기본 내용은 높이가 벌어집니다.
지금div에 높이를 설정합니다. 아래와 같습니다.

여기서 div1과 div3의 높이에 구체적인 값을 설정하면 높이가 벌어지지만 높이를 백분율로 설정하면 상황이 달라진다. 코드는 다음과 같다.

높이를 백분율로 설정한 후,
높이가 버티지 못하고 내용의 높이에 따라 버티기만 하는 이유는 무엇일까?나중에 자료를 찾아봤는데,
http://www.cnblogs.com/cainiao-Shun666/p/6622678.html  

HTML에서 블록 요소 설정height:100% 구현

문장에서 다음과 같이 지적하였다.
페이지 요소의 높이 (Height) 를 100%로 설정할 때, 브라우저 창 전체의 높이를 충족시킬 수 있기를 기대하지만, 대부분의 경우, 이러한 방법은 아무런 효과가 없다.
왜 Height:100%는 효과가 없을까요?
상식에 따르면, 우리가 CSS의height 속성으로 원소의 높이를 정의할 때, 이 원소는 브라우저의 세로 공간에 설정된 대로 해당하는 공간 거리를 확장해야 한다.예를 들어, div 요소의 CSS가 height: 100px인 경우그것은 페이지의 세로 공간에서 100px의 높이를 차지해야 한다.
W3C의 규범에 따라 백분율의 높이는 설정할 때 이 원소의 부모 원소 용기의 높이에 따라 달라진다.그래서 만약div의 높이를height:50%로 설정하면,그것의 부원소의 높이는 100px이다. 그러면 이div의 높이는 50px가 되어야 한다.
페이지를 디자인할 때, 그 안에div 요소를 설치합니다. 전체 창의 높이를 차지하기를 원하고, 가장 자연스러운 방법으로 이div에height:100%를 추가합니다.의 css 속성입니다.그러나, 만약 너비가width:100%로 설정된다면,그러면 이 요소의 너비는 창의 전체 가로 너비로 즉시 확장됩니다.높이도 이렇게 되나요?
틀리다
왜 할 줄 모르는지 이해하기 위해서, 브라우저가 높이와 너비를 어떻게 계산하는지 이해해야 한다.웹 브라우저는 유효한 너비를 계산할 때 브라우저 창의 열기 너비를 고려합니다.만약 너비에 부족한 값을 설정하지 않는다면, 브라우저는 자동으로 페이지 내용을 전체 가로 너비로 평평하게 채울 것이다.
그러나 고도의 계산 방식은 완전히 다르다.사실상 브라우저는 창의 범위를 넘어서지 않는 한 내용의 높이를 계산하지 않는다.또는 전체 페이지에 절대 높이를 설정하십시오. 그렇지 않으면 브라우저는 간단하게 내용을 아래로 쌓을 수 있고 페이지의 높이는 고려할 필요가 없습니다.페이지에 부족한 높이 값이 없기 때문에 원소의 높이를 백분율로 설정하면 부모의 높이를 얻을 수 없고, 자연히 자신의 높이를 계산할 수 없다.다시 말하면 부모 요소의 높이는 단지 부족한 값일 뿐이다: height: auto.브라우저가 이 부족한 값에 따라 백분율 높이를 계산하도록 요구할 때undefined의 결과만 얻을 수 있습니다.즉null값입니다. 브라우저는 이 값에 대해 아무런 반응도 하지 않습니다.부모 원소가 고정된 높이를 설정하지 않았기 때문에 하위 원소의 높이height: 100%도 작용하지 않습니다.
그러면 원소의 백분율 높이:height::100%가 작용하려면 이 원소의 모든 부급 원소의 높이에 값을 설정해야 합니다.
다시 말하면 아까 예에서 바디와 html 요소의 높이를 Height:100% 아래div의 높이의 백분율로 설정해야 효력이 발생한다.
즉,

이렇게 하면div1과div3의 백분율 높이가 적용됩니다
이후 이 글의 저자에게 감사를 드립니다.
http://www.cnblogs.com/cainiao-Shun666/p/6622678.html
반걸음을 내딛지 않으면 천리까지 갈 수 없다.
작은 물줄기를 축적하지 않으면, 강과 바다를 이룰 수 없다.