2012-07-12 4 views
1

모바일 사이트를 개발 중이며 매우 간단한 마크 업을 사용하려고합니다. 나는 소니 에릭슨에서 확인할 때테이블 높이가 작동하지 않음

.abc {height:some-dynamic-value-in-px} 

.abc div {height:5%;} 
.abc table {height:95%;} 

문제는이 코드는 모든 최신 phones.But에 근무한다

<div class="abc"> 
    <div>&nbsp;</div> 
    <table> 

    </table> 
</div> 

CSS (500i를) 다음

나에게 문제를주고 내 코드입니다 테이블 높이가 부모 div abc에서 나오고 UI가 왜곡되었습니다. 이 사이트 http://www.apptools.com/examples/tableheight.php 을 확인하고 신체에 높이 {100 %}를 주었지만 성공은 없었습니다. 내가 어디로 잘못 가고 있는지 알려주세요.

또한 높이를 px로 지정하면 모든 핸드셋에서 작동합니다.하지만 왜 비율이 작동하지 않는지 이유를 알고 싶습니다.

+0

겉으로보기에 끝이없는 모바일 플랫폼 배열에 미묘한 세부 사항으로 전화를 걸면 많은 시간을 소모 할 것입니다. [JQuery Mobile] (http://jquerymobile.com/) 디자이너를 사용하여 모바일 친화적 인 HTML 레이아웃을 생성하는 것이 좋습니다. 그들은 모든 인기있는 모바일 플랫폼에서 레이아웃이 올바르게 보이게 만드는 고통을 겪었습니다. – Asaph

+0

예 Jquery Mobile에 대해 알고 있지만 몇 가지 이유로 JS를 사용할 수 없으므로 HTML과 CSS에 완전히 의존해야합니다. – user1483487

답변

0

div의 높이를 이미 알고 있다면 px에서 고정 된 치수를 사용하는 것이 좋습니다.

(필요하지 않은 경우)을 피하십시오.

일부 브라우저의 경우 body { height: 100%; }은 충분하지 않을 수 있습니다.

html, body { height: 100%; } 

.abc { height:100%; } 
.abc div { height:5%; } 
.abc table { height:95%; } 

또한, 웹 페이지에 DOCTYPE을 포함하는 것을 잊지 말아.

+0

레이아웃이 모든 브라우저/핸셋에서 거의 동일하게 렌더링되도록 백분율을 사용했습니다. 그리고 DOCTYPE도 포함 시켰습니다. px로 작업하는 것이 최적의 솔루션이라고 생각합니다. – user1483487

+0

@ user1483487, 크기를 제어하기 위해 스크립트를 사용하는 것이 그다지 중요하지 않은 경우 – Starx

관련 문제