css에는 calc()연산이 있습니다.
width나 height나 특정값을 딱 정해진 값이 아닌 특정값에 더해지거나 빼거나 하는 값을 넣을 수 있습니다.
예를들어 width: calc(100% - 200px)이런식으로 가능합니다.
이러면 특정 태그의 영역을 200px을 제외한 모든 가로크기로 영역을 차지하게 됩니다.
다음은 calc연산을 이용한 실행 결과입니다.
연두색의 경우 브라우저의 크기가 줄거나 늘어나는 것에 상관없이 400px로 고정되지만
보라색의 경우 400px을 제외한 나머지 영역을 전부 차지하게 됩니다.
이게 calc연산을 이용한 방법입니다.
전체 코드입니다.
더보기
<!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%;
}
div{
border: 1px solid black;
}
#container{
width: 100%;
min-width: 700px;
height: 100%;
}
#fixed{
width: 400px;
height: 100%;
background-color: aquamarine;
float: left;
}
#responsive{
width: calc(100% - 400px);
height: 100%;
float: left;
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="container">
<div id="fixed">
</div>
<div id="responsive">
</div>
</div>
</body>
</html>