HTML 5/CSS 백분율 높이 팁
P粉135292805
2023-08-20 19:15:25
<p>CSS에서 <div>를 특정 비율의 높이로 설정하려고 하는데 여전히 그 안에 있는 콘텐츠와 크기가 같습니다. 그러나 HTML 5의 <!DOCTYTPE html>을 제거하면 제대로 작동하고 <div>가 예상대로 전체 페이지를 차지합니다. 페이지가 인증을 통과하길 원합니다. 어떻게 해야 합니까? </p>
<p>이 CSS는 <div>에 있고 ID는 <code>page</code>입니다. </p>
<pre class="brush:php;toolbar:false;">#페이지 {
패딩: 10px;
배경색: 흰색;
높이: 90% !중요;
}</pre>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
또한
<html>和<body>요소의 높이를 설정해야 합니다. 그렇지 않으면 콘텐츠에 맞을 만큼만 커집니다. 예를 들어 :백분율이란 무엇인가요?
백분율 높이를 설정하려면 상위 요소(*)에 명시적인 높이가 있어야 합니다. 이것은 상당히 명백합니다. 높이를
auto로 두면 블록이 콘텐츠의 높이를 차지하게 됩니다... 그러나 콘텐츠 자체의 높이가 상위 요소의 백분율로 표현되면 약간의 차이가 있습니다. 양도 논법. 브라우저는 포기하고 콘텐츠 높이만 사용합니다.따라서 div의 상위 요소에는 명시적인
height속성이 있어야 합니다. 원하는 경우 높이는 백분율로 표시될 수 있지만 이는 문제를 다음 단계로 끌어올릴 뿐입니다.div의 높이를 뷰포트 높이의 백분율로 만들려는 경우
<html>和<body>，都必须具有height: 100%를 포함한 div의 모든 상위 요소가 있으므로 div에 대한 명시적인 백분율 높이 체인이 있습니다.(*: 또는 div가 배치된 경우 "포함 블록", 역시 배치된 가장 가까운 조상 요소입니다.)
또는 모든 최신 브라우저와 IE >= 9는 뷰포트 높이를 기준으로 새로운 CSS 단위를 지원합니다(
으아아아vh)和视口宽度(vw):여기에서 자세한 내용을 확인하세요.