묻고답하기
간단한 CSS 도움 요청합니다 ㅠ 배경이미지
2013.06.19 20:12
위 사진에서 보시는 것처럼 저는 사이트 전체에 파란색 배경을 깔고 그 안에 div 로 포지셔닝을 하고 있는데요.
화면에서 보시는 것처럼 글자가 있는 부분에 내용이 없으면 배경이 안채워지는데
저는 내용이 없어도 배경 이미지가 밑에 검은색 바까지 쭉 채워졌으면 하는데 ...
어떻게 해야 하나요? 임의로 height 값을 집어 넣는 방법 말고... height:100% 로 해도 안되더라구요...
혹시 어떤 방법이 있는지 ㅣㅠㅠ..
소스 첨부합니다.. ㅠㅠ
<style>
body { background-color:blue; }
.container_site { width:1280px; margin:0 auto; }
/* Left Panel */
.left { width:260px; float:left; border-left:1px solid #b5b5b5; position:relative; overflow:hidden; }
.left .logo { height:50px; background-color:#235688; border-right:1px solid #023c70; }
.left .dsc_logo { height:31px; background-color:#232323; border-right:1px solid #1e1e1e; }
.left .bg_texture { background:url(/imgs/katniss/mainbg.png) repeat-y; }
.left .searchbox { height:56px; border-bottom:1px solid #bbb; }
.left .loginbox { height:94px; border-bottom:1px solid #bbb; }
.left .menu_header { height:26px; background:url(/imgs/katniss/bg_menu_header.gif) repeat-x; border-right:1px solid #bbb; border-bottom:1px solid #bbb; }
.left .menus { height:100%; width:100%; }
/* Right Panel */
.right { width:1018px; float:left; height:500px; overflow:hidden; }
.right .branding { height:50px; background-color:#3b6998; border-left:1px solid #45729e; }
.right .location { height:31px; background-color:#333; border-left:1px solid #3c3c3c; }
.right .broswer_title { height:56px; background:url(/imgs/katniss/bg_bt.gif) repeat-x; border-bottom:1px solid #bbb; }
.right .content { height:1000px; background:url(/imgs/katniss/gray_jean.gif) repeat; }
/* Footer */
.footer { width:1280px; float:left; margin:0 auto; }
.footer .left_footer { width:261px; height:41px; float:left; background-color:#222; }
.footer .right_footer { width:1019px; height:41px; float:left; background-color:#333; border-left:#3c3c3c; }
</style>
<div class="container_site">
<div class="left">
<div class="logo"></div>
<div class="dsc_logo"></div>
<div class="bg_texture"> <!--이 부분부터 배경이 시작됩니다. 내용이 있으면 채워집니다-->
<div class="searchbox"></div>
<div class="loginbox"></div>
<div class="menu_header"></div>
<div class="menus">이 부분 배경이 밑에까지 채워지려면?</div>
</div><!--end of menu_wrapper-->
</div><!--end of bg_texture-><!--배경 끝-->
</div><!--end of left-->
<div class="right">
<div class="branding"></div>
<div class="location"></div>
<div class="broswer_title"></div>
<div class="content"></div>
</div><!--end of right-->
<div class="footer">
<div class="left_footer"></div>
<div class="right_footer"></div>
</div><!--end of footer-->
</div><!--end of container_site-->
전체를 감싸는 div id는 containerBox_main 입니다.
그 안에 크기를 자동으로 늘리고 싶은 div id는 menuArea 이구요
js 파일에
<script type="text/javascript">
//<![CDATA[
function setDivHeight(objSet, objTar)
{
var objSet = document.getElementById(objSet);
var objTarHeight= document.getElementById(objTar).offsetHeight;
objSet.style.height = objTarHeight + "px";
}
//]]>
</script>
를 추가 합니다.
그 후에 실제 페이지에 window.onload 를 시킵니다.
그러면 containerBox_main 세로 크기를 불러서 menuArea의 height 에 적용 시키게 됩니다.
저는 이렇게 사용했었는데 다른 더 좋은 방법이 있을 수도 있겠네요.
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
setDivHeight('menuArea','containerBox_main');
}
//]]>
</script>
http://www.xpressengine.com/?mid=freeboard&document_srl=18900122&sort_index=readed_count
전에 비슷한 답변을 해주신 분이 계셨네요. 이 부분도 참고하시면 좋을 것 같습니다.