세로 화면 방향으로 작동하지 않는 높이의 백분율

html 본문에 포함 된 2 개의 div 요소 (기본 및 헤더)에 대한 백분율을 설정하려고합니다. 문제는 화면 방향이 세로 인 경우 이것이 작동하지 않는다는 것입니다 (높이 비율이 잘못 표시됨). 내가 확인하고 예 치수는 다음과 같습니다 :세로 화면 방향으로 작동하지 않는 높이의 백분율

320 × 480

320x568

600x800

768x1024의

800x1280

나는 내 코드를 확인 viewport resizer를 사용합니다.

HTML 코드 :

<body> 
<header> 

<div id="title"> 
Just a title 
</div> 

</header> 

<main> 
Main div element here 
</main> 

</body>

CSS 코드 :

html, body{ 
    background-color:#A8F000; 
    height:100%; 
    } 

header{ 
    background-color:#F80012; 
    height:25%; 
    } 

main{ 
    background-color:#009E8E; 
    height:70%; 
    }

잘못 여기서 뭐하는거야?

출처

2014-04-21 Dchris

당신은'header' 높이 라인의 끝에 세미콜론을 누락 한 번 봐,하지만 당신은 또한 표준 없습니다 DOM 요소 이름을 사용하고 있습니다. 왜 ID로'header'와'main'을'div'라고 이름 짓지 않습니까? – gtr1971

불행히도 저에게 downloadport ... WTF를 찾을 수없는 것처럼 viewportresizer는 2 초 이상 걸립니다!?!? : D –

viewportresizer를 북마크에 추가해야합니다. – Dchris

사용이 : viewport

header{ 
    background-color:#F80012; 
    height:25%; 
}

추가;

출처

2014-04-21 13:20:30

편집 됨. 이것은 문제가 아닙니다. 수정 해줘서 고마워. – Dchris

이 특정 화면 크기에서 작동하지 않습니다. 게시물 – Dchris

을 편집했습니다. U는이 [link] (http://dev.w3.org/csswg/css-device-adapt/) –

완벽하게 작동합니다. 바이올린

html, body{ 
    background-color:#A8F000; 
    height:100%; 
    } 

header{ 
    background-color:#F80012; 
    height:20%; 
    } 

main{ 
    background-color:#009E8E; 
    height:80%; 
    }

바이올린 http://jsfiddle.net/7EEMB/

출처

2014-04-21 13:22:49 Richa

일부 설명이 작동하지 않습니다. 게시물을 편집했습니다. – Dchris

세로 화면 방향으로 작동하지 않는 높이의 백분율

답변

관련 문제