기록 ＞ 기억
레이아웃 잡기 - div 동적 사이즈 조절 본문
레이아웃 잡기 - div 동적 사이즈 조절
보통 레이아웃을 잡을 때 div 태그로 구성을 합니다.
테이블의 경우에는 창크기에 따라 나머지를 <col width : "*"> 주면 되지만 div의 경우에는 나머지를 줄 수가 없습니다.
다음과 같이 하면 나머지 사이즈를 동적으로 조절할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
margin: 0;
width: 100%;
height: 100%;
}
header{
height: 60px;
background-color: gray;
}
.container{
position: relative;
width:100%;
height: 800px;
}
.nav{
display: inline-block;
width: 250px;
height: 100%;
background-color: green;
}
.content{
display: inline-block;
height: 100%;
position: absolute;
left: 250px;
right: 0;
overflow: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
</header>
<div class="container">
<div class="nav">
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>container 안에 nav , content 각각 display 속성을 inline-block; 을 주어 한 라인에 블록 속성으로 보여지게 하였습니다.
content는 left에서 250px 부터 고정위치로 그려지고, right 가 0 이므로 우측창 끝까지 넓이가 자동으로 늘어납니다.
Comments