나머지 빈영역 채우는 기능이 필요해서 CSS를 알아보던중 flexbox 라는 것을 알게되었다.
마치 Android 의 UI 구성을 할 때 wieght 와 같은 속성이랄까..
세로로 구성을 할 시 찾아보니 다음과 같이 하면 된다고 한다.
-webkit-flex-direction: column;
flex-direction: column;
그래서 다음과 같이 작업을 했다.
<!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%; background-color: #DFDFE0; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; -webkit-flex-direction: column; flex-direction: column; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #detailMsgHeaderFake { width: 100%; height: 50px; } #detailMsgHeader { width: 100%; height: 50px; position: absolute; top: 0; left: 0; background-color: #FFFFFF; border: 1px solid #747474; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-box-shadow:0px 5px 20px silver; -moz-box-shadow:0px 5px 20px silver; box-shadow:0px 5px 20px silver; } #detailMsgContent { border: 0; width: 100%; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #detailMsgIframe { border: 0; width: 100%; height: 100%; border-left: 1px solid #747474; border-right: 1px solid #747474; border-bottom: 1px solid #747474; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } </style> </head> <body> <div id="detailMsgHeaderFake"></div> <div id="detailMsgHeader"></div> <div id="detailMsgContent"> <iframe id="detailMsgIframe" src="http://ko.learnlayout.com/"></iframe> </div> </body> </html>
결과는?? 다음과 같이 나왔다.
Phone 환경:
Phone: LG-F220K (LG-GK)
OS ver: Android 4.1.2
Browser: OEM Browser (Chrome Browser 는 문제없음)
원래 의도했던 건 아래의 모습...
다음과 같이 CSS를 한줄 추가했다.
이전 버전의 방법이라고 한다. Link
<!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%; background-color: #DFDFE0; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #detailMsgHeaderFake { width: 100%; height: 50px; } #detailMsgHeader { width: 100%; height: 50px; position: absolute; top: 0; left: 0; background-color: #FFFFFF; border: 1px solid #747474; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-box-shadow:0px 5px 20px silver; -moz-box-shadow:0px 5px 20px silver; box-shadow:0px 5px 20px silver; } #detailMsgContent { border: 0; width: 100%; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #detailMsgIframe { border: 0; width: 100%; height: 100%; border-left: 1px solid #747474; border-right: 1px solid #747474; border-bottom: 1px solid #747474; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } </style> </head> <body> <div id="detailMsgHeaderFake"></div> <div id="detailMsgHeader"></div> <div id="detailMsgContent"> <iframe id="detailMsgIframe" src="http://ko.learnlayout.com/"></iframe> </div> </body> </html>
PS.
위와 같이 작업을 하고도 결국 flexbox를 사용할 수 없었는데..
div 안에있는 iframe의 height 를 100%로 해도 정상적으로 적용되지 않았다.
div를 빼고 iframe에 flexbox를 적용해 봤지만 iframe에는 flexbox가 적용되지 않았다.
(위에 적힌 내 Android 단말에서..)
결국 다음과 같은 방법으로 다르게 작업을 했다.
[CSS] Div 동적으로 사이즈(Width, Height) 변환 (또는 비어있는 나머지 영역 채우기)
댓글
댓글 쓰기