Android 의 특성상 화면의 크기와 해상도가 모두 다르기 때문에
1004lucifer
Width, Height 길이를 다음과 같이 스크립트를 이용해서 처리를 했었다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#wrapperDiv {
width: 100%;
height: 200px;
background-color: #C8BEB7;
}
#div1 {
display: inline-block;
width: 200px;
height: 100%;
background-color: #747474;
}
#div2 {
display: inline-block;
width: 500px;
height: 100%;
background-color: goldenrod;
}
</style>
<script type="text/javascript">
function div2Resize() {
var div2 = document.getElementById('div2');
div2.style.width = window.innerWidth - 200 + 'px';
}
window.onload = function() {
div2Resize();
// 브라우저 크기가 변할 시 동적으로 사이즈를 조절해야 하는경우
window.addEventListener('resize', div2Resize);
}
</script>
</head>
<body>
<div id="wrapperDiv">
<div id="div1">div1</div><!--
--><div id="div2">div2</div>
</div>
</body>
</html>
실행 시 다음과 같다.
('Edit In JSFiddle' 을 누르면 브라우저를 동적으로 크기를 움직여서 자세히 확인이 가능하다.)
단순히 단일페이지에서 위의 기능을 사용하는데 문제는 없었는데
위의 페이지를 다른 페이지의 iframe 으로 넣으니 iframe 내의 페이지와 wrapper 페이지의
스크립트 실행 순서때문에 문제가 되었는지..
iframe 내의 페이지에서 settimeout 함수로 0.2초 정도 딜레이를 주면
문제가 발생하지는 않지만 로딩되는 순간 레이아웃이 잠시 깨져 보인다.
1004lucifer
결국 순수 CSS로 밖에 처리할 수 없는 상황..
비어있는 나머지 영역을 채우려고 찾아보니 CSS의 flex(flexbox) 방법이 있었다.
구형 브라우저에서는 작동하지 않지만 어차피 안드로이드, 아이폰에서 보여줄 예정이기에..
크게 신경쓰지 않았다.
(하지만 flex(flexbox)도 Android 의 크롬에서는 정상적으로 보여지나 OEM 브라우저에서는 정상적으로 보여지지 않아 사용할 수 없었다.)
이것저것 해보다가 다음과 같은 방법을 알아내었다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#wrapperDiv {
position: relative;
width: 100%;
height: 200px;
background-color: #C8BEB7;
}
#div1 {
display: inline-block;
width: 200px;
height: 100%;
background-color: #747474;
}
#div2 {
display: inline-block;
height: 100%;
position: absolute;
left: 200px; right: 0;
font-size: 12pt;
word-spacing: 1pt;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: goldenrod;
}
</style>
</head>
<body>
<div id="wrapperDiv">
<div id="div1">div1</div><!--
--><div id="div2">테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.</div>
</div>
</body>
</html>
1004lucifer
실행 시 다음과 같다.
('Edit In JSFiddle' 을 누르면 브라우저를 동적으로 크기를 움직여서 자세히 확인이 가능하다.)
관련링크
[CSS] Div center 정렬방법
[CSS] Centering Percentage Width/Height Div Elements (크기가 동적인 Div 센터정렬)
댓글
댓글 쓰기