CSS 상대적 크기의 머리말/꼬리말

Question

저는 CSS 전문가가 아니므로 뭔가 분명하지 않을 수 있습니다. 상대 크기 머리글과 바닥 글을 설정하려고합니다 (큰 모니터에서는 머리글과 바닥 글이 작은 화면보다 큽니다). 이렇게하려면 비율 높이를 사용하고 있습니다. 그러나 이것은 position을 absolute으로 설정 한 경우에만 작동합니다. 문제는 절대적으로 설정하면 화면의 주요 부분 (머리글과 바닥 글 사이)과 겹치는 것입니다. 그것은 머리글/바닥 글 안에있는 항목에 의존하기 때문에 상대 경로로 설정하면 작동하지 않습니다.

이

.header 
{ 
    position:absolute; 
    top:0px; 
    background-color:white; 
    width:100%; 

    height:30%; 

} 

영문 페이지가 단순히 상대적으로 머리글과 바닥 글을 비례 얻을 수있는 방법이 있나요

<div class="header"></div> 

포함 이 내 헤더처럼 보이는 무엇인가? 부모가 높이 자동 인 경우는 부모의 높이에 따라 하위 내용의 높이 ....에 따라 달라질 수 있기 때문에 부모가 필요 비율 높이를 사용하려면

감사

Answer 1

요소의 백분율 높이를 지정하려면 HTML과 BODY를 정의 된 높이로 정의해야합니다. 이것이 무엇인지 모르기 때문에 100 %를 사용하십시오.

html, body { 
    height:100%; 
} 

Answer 2

는 고정 된 높이를합니다 등등. 절대 위치로 설정하면 화면 크기가 고정 크기 인 부모 요소로 화면 뷰포트가 걸립니다 (이론). 이것이 절대적으로 작동하는 이유입니다.

브라우저 해상도에 따라 비례 머리글과 바닥 글을 사용하는 것이 좋습니다. 솔직히 말하면, 솔직히 말해서 글꼴 크기 나 이미지를 머리글에 맞추어 크기를 늘리거나 줄여야 할 필요가 있습니다. 정말로 원하는 경우 다른 CSS를 사용하는 것이 좋습니다. 사용자가 선택할 수있는 (또는 자바 스크립트에 의해 자동으로 선택되는) 스타일 시트. 이 방법은 누군가가 큰 결의안을 갖고 있다면 원하는 경우 더 큰 것을 선택할 수 있습니다. 그렇게하면 스케일링 문제를 다룰 필요가 없습니다.