반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html{
width: 100%;
height: 100%;
}
#container{
width: 100%;
min-width: 700px;
height: 100%;
}
#testDiv{
width: calc(100% - 400px);
height: 100%;
float: left;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="container">
<div id="testDiv">
</div>
</div>
</body>
</html>
<!-- 출처 : https://usang0810.tistory.com/m/31 -->css에 calc() 연산이 있는데 width나 height 값을 동적으로 더해지거나 빼거나 하는 값을 넣을 수 있습니다.
예) width: calc(100% - 400px) 일 경우 전체 영역에 - 400px을 차지합니다.
→ 나머지 공간을 100%로 같이 잡으면 꽉찬 영역이 동적으로 변하는 걸 확인 할 수 있습니다.
반응형