백분율 높이를 설정하려면 상위 요소(*)에 명시적인 높이가 있어야 합니다. 이것은 상당히 명백합니다. 높이를auto로 두면 블록이 콘텐츠의 높이를 차지하게 됩니다... 그러나 콘텐츠 자체의 높이가 상위 요소의 백분율로 표현되면 약간의 차이가 있습니다. 양도 논법. 브라우저는 포기하고 콘텐츠 높이만 사용합니다.
따라서 div의 상위 요소에는 명시적인height속성이 있어야 합니다. 원하는 경우 높이는 백분율로 표시될 수 있지만 이는 문제를 다음 단계로 끌어올릴 뿐입니다.
div의 높이를 뷰포트 높이의 백분율로 만들려는 경우和,都必须具有height: 100%를 포함한 div의 모든 상위 요소가 있으므로 div에 대한 명시적인 백분율 높이 체인이 있습니다.
(*: 또는 div가 배치된 경우 "포함 블록", 역시 배치된 가장 가까운 조상 요소입니다.)
또는 모든 최신 브라우저와 IE >= 9는 뷰포트 높이를 기준으로 새로운 CSS 단위를 지원합니다(vh)和视口宽度(vw):
또한
和
요소의 높이를 설정해야 합니다. 그렇지 않으면 콘텐츠에 맞을 만큼만 커집니다.예를 들어:
백분율이란 무엇인가요?
백분율 높이를 설정하려면 상위 요소(*)에 명시적인 높이가 있어야 합니다. 이것은 상당히 명백합니다. 높이를
auto
로 두면 블록이 콘텐츠의 높이를 차지하게 됩니다... 그러나 콘텐츠 자체의 높이가 상위 요소의 백분율로 표현되면 약간의 차이가 있습니다. 양도 논법. 브라우저는 포기하고 콘텐츠 높이만 사용합니다.따라서 div의 상위 요소에는 명시적인
height
속성이 있어야 합니다. 원하는 경우 높이는 백분율로 표시될 수 있지만 이는 문제를 다음 단계로 끌어올릴 뿐입니다.div의 높이를 뷰포트 높이의 백분율로 만들려는 경우
和
,都必须具有
height: 100%
를 포함한 div의 모든 상위 요소가 있으므로 div에 대한 명시적인 백분율 높이 체인이 있습니다.(*: 또는 div가 배치된 경우 "포함 블록", 역시 배치된 가장 가까운 조상 요소입니다.)
또는 모든 최신 브라우저와 IE >= 9는 뷰포트 높이를 기준으로 새로운 CSS 단위를 지원합니다(
으아아아vh
)和视口宽度(vw
):여기에서자세한 내용을 확인하세요.