높이 100% 반응형 div 조언좀 부탁드립니다.
본문
그림처럼 div가 3개가 있고 그림에는 없지만 3개를 묶는 상위 div가 있는 형태입니다.
그림을 잘못그렸는데 2번과 3번은 안에 내용들어가는대로 높이가 늘어나도록 할 생각이라
상관없고 1번이 문제인데 1번은 언제나 100%의 높이를 유지하게 만들고 싶네요.
2번에 메인 내용이 들어갈건데 2번이 내용이 길어지면 똑같이 1번도 그에 맞춰서
높이가 늘어나도록요. 어떻게 해야될까요?
답변 2
테이블 코딩하시면 간단하게 처리될거 같습니다.
<style>
.auto_height_table{
width: 100%;
}
.auto_height_table tr td{
width: 33%;
text-align: center;
color: #fff;
}
</style>
<table class="auto_height_table">
<tr>
<td class="red_bg" style="background-color: #ff0000;">1</td>
<td class="blue_bg" style="background-color: #00ff00;">2<br/>2<br/>3</td>
<td class="green_bg" style="background-color: #0000ff;">3</td>
</tr>
</table>
내용을 위로 정렬 시키고 싶으면
.red_bg{
vertical-align : top;
}
하시면 위로 정렬 됩니당.
근데 궁금한게 높이면 height를 변경해야되는거 아닌가요? width로 하는 이유가?
높이는 어차피 컨텐츠가 채워진만큼 높아질테니 조절할 필요가 없지요~
답변을 작성하시기 전에 로그인 해주세요.
