[CSS] 2개의 div를 사용시 높이 부분 조정하는 방법에 질문해보아요.
본문
제목에 어떻게 설명이 더 어려운것 같습니다. ㅠㅠ
<div class="wrap" style="with:980px">
<div class="aside" style="float:left; width:210px; background:#000; min-height:500px;">
</div>
<div class="container" style="float:right: 730px; min-height:500px;">
</div>
</div>
이렇게 가로 980px의 넓이에서
좌측으로는 aside를 우측으로 container를 사용하게 되면
일반적으로 게시판을 사용하게 되더라도 container의 세로 길이는 최소 500px 보다 길어질때가
많습니다. 그때의 높이에도 aside의 배경색이 최소 500이 아닌 100%를 다 사용을 하고 싶은데...
position:absolute; 를 제외한 다른 방법은 없을까요?
답변 2
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS Reference | display: table</title>
<style>
div {
border: 1px solid #bcbcbc;
}
.wrap {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.aside {
display: table-cell;
width:210px;
min-height:500px;
background:#000;
}
.container {
display: table-cell;
min-height:500px;
background:#ccc;
}
</style>
</head>
<body>
<div class="wrap">
<div class="table-row">
<div class="aside">
<p>메뉴</p>
</div>
<div class="container">
<p>내용</p>
</div>
</div>
</div>
</body>
</html>