나머지 빈영역 채우는 기능이 필요해서 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) 변환 (또는 비어있는 나머지 영역 채우기)
댓글
댓글 쓰기