묻고답하기
간단한 CSS 질문합니다. ㅠ
2013.07.10 21:16
<style>
.container_site { width:600px; }
.e1 { width:100px; float:left; background-color:yellow; }
.content { width:500px; height:300px; float:left; background-color:#eee; }
</style>
<div class="container_site">
<div class="e1">side</div>
<div class="content">content 의 높이는 유동적입니다.<br>
하지만 side 영역 보단 항상 큽니다.<br>
이 상황에서 side 영역 배경색(노란색)이 컨텐츠영역 높이만큼(밑에까지 쫙)<br>
채워지려면 어떻게 해야 하나요..?</div>
</div>
파란색이 CSS 부분이고 초록색이 HTML 부분입니다.
아주 간단한 고민같지만... 쉽게 해결하지 못해서 질문드려요...
jsfiddle.net 에 실행하여 보시면... 문제가 뭔지 짐작하실 수 있을거에요. ㅠㅠㅠ
어떻게 해결해야 할까요...?
노란색side 영역이 내용이 충분하지 않아도 content 영역의 높이만큼 배경이 채워지려면?
<실행화면>
댓글 2
-
웃는기차
2013.07.11 08:57
두가지 방법이 있습니다.
1) 배경이미지로 처리
2) 배경색으로 처리
둘다 side 와 content를 덥는 wrap이 하나 더 있어야 하고요
<div class="wrap">
<div class="side></div>
<div class="content"></div>
</div>
2) wrap의 배경색으로 노랑을 주고 content의 배경색으로 주면 side는 항상 노랑입니다.
1) wrap 의 배경이미지로 노란색인 높이 1px 가로 side 넓이의 이미지를 y축으로 반복되게 깔아줍니다.
content 부분 css 에 margin-left:100px; 을 줘야할꺼 같습니다.
또 height 부분 ... e1 { height:300px; or height:auto; or height:100%; } 테스트 해 보세요.
브라우즈마다 다릅니다.