묻고답하기
(html질문) %크기 div의 최소 유지 사이즈를 확보하려면
2011.07.18 14:27
안녕하세요. html 질문이 있어서 이렇게 글 올립니다. 게시판에 적절치 못한 질문이라면 사과드립니다.
html 본연에 대한 질문을 어디에 (어느 다른 사이트라도) 올리면 좋을지 알려주신다면 그곳으로 옮기며 삭제하겠습니다.
div를 만들면서 width를 %로 지정하였습니다. 브라우져 크기에 따른 비율로 배치하고 싶기 때문입니다.
하지만, 브라우져 크기가 매우 작아지는 경우 (640px 이하 라든지), 지정한 최소치 이하로는 줄어들지 않았으면 합니다.
(그 최소치 이하로 브라우져 크기를 줄이는 경우에, 브라우져 화면에 스크롤바가 생겨야 하겠죠.)
예제를 만들어 놓았습니다. : http://enzoy.inames.kr/test01.html
이 html을 보시면 좌우측의 사이드 칸들도, 가운데의 메인 콘텐츠 칸도 모두 width가 %로 지정되어서,
브라우져 크기를 늘리고 줄여도 해당 크기에 맞추어서 재배열됩니다.
그리고 자세히 보시면 왼쪽 div, 가운데 div, 오른쪽 div 모두 아래쪽에 얇은 (height 2px짜리) div가 있는데 id가 strut__입니다.
브라우져 크기가 너무 작아질 때에 버팀목 역할을 해주기 바라며 삽입한 div입니다.
각기 크기가 100px, 400px, 80px 입니다. (도합 580px)
하지만 원하는대로 동작하고 있지 않습니다.
브라우져 크기가 600px 이상일 때에는 비율에 따라 배치되고,
600px 이하로 작아지면 100px, 400px, 80px 의 최소치를 유지하며 원래 사이트의 div배치 골격을 유지했으면 하는데...
이를 구현할 방법이 딱히 없을런지... 고수분들께 질문드립니다.
읽어주셔서 감사합니다. 답변 기다리겠습니다.
이하는 소스입니다.
__html____________________________________________
<head>
<style type="text/css">
div {border:1px solid black; margin:1px; padding:1px;}
</style>
</head>
<body>
<div id="bodydiv" style="width:99%; float:left;">bodydiv<br />
<div id="topdiv" style="width:20%; float:left;">
<div style="width:90%; height:300px; float:left;">side 11</div>
<div id="strut10" style="width:100px; height:1px; clear:both; overflow:auto;"></div>
</div><!--end of topdiv-->
<div id="middlediv" style="width:65%; float:left;">
<div style="width:95%; height:450px; float:left;">main 1</div>
<div id="strut20" style="width:400px; height:1px; clear:both; overflow:auto;"></div>
</div><!--end of middlediv-->
<div id="bottomdiv" style="width:12%; float:left;">
<div style="width:90%; height:200px; float:left;">side 21</div>
<div id="strut30" style="width:80px; height:1px; clear:both; overflow:auto;"></div>
</div><!--end of bottomdiv-->
<div id="strut40" style="width:640px; height:1px; clear:both; overflow:auto;"></div>
</div><!--end of bodydiv-->
</body>
댓글 3
-
plruto
2011.07.18 14:47
min-width:600px; -
enzoy
2011.07.18 14:56
자문자답도 함께 달아봅니다.
css의 min-width가 이론적인 정답이겠습니다.
IE7 및 이전의 IE에서는 이 스타일이 먹지 않기 때문에, IE용 사투리인 밑줄윗쯔(_width)도 같이 추가해줘야 하는군요.
즉, <div style="width:60%; min-width:200px; _width:200px">이런 식으로 말입니다.
그런데, 해당 IE사투리를 정확히 먹이기 위해서는 또한 html의 해더에서 DTD를 정확히 지정해줘야 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
이런식으로 말입니다. -
enzoy
2011.07.29 12:03
다시 한번 자답을 달아봅니다.
css의 밉둥이인 ie의 경우 min-width 가 버젼 7이후에만 먹습니다. 따라서, 버젼 6 이전에서도 적용하려면 변칙이 필요합니다.
ie6 이전 이외의 대부분의 표준준수 브라우져 : css에서 min-width 지정하면 됩니다.
ie6 : bodywrap용 div를 만들고 getElementById로 가져와서 obj.clientWidth로 폭을 검사하고 obj.style.width='640px'와 같이 재지정 해줘야 합니다.
ie5 이전 : 한픽셀짜리 투명gif를 폭크기를 늘려 지정해두면 그 그림이 버팀목 역할을 해서 min-width가 구현됩니다.
이를 모두 적용하여, 모든 브라우져에서 min-width가 적용되는 소스를 작성해보면 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"><head>
<style type="text/css">
#bodywrap {
width:99%;
min-width:640px;
margin:0;
padding:0;
border:1px solid black;
}
</style>
</head><body>
<div id="bodywrap">
Put some contents here.<br />
<img src="/images/spacer.gif" width="640">
</div><!--[if lte IE 6]>
<script>
window.onload=function() {
var obj = document.getElementById('bodywrap');
if (obj.clientWidth<640) obj.style.width='640px';
}
</script>
<![endif]--></body>
</html>
