css Document Element 요소 크기를 유동적으로 조절하기
2022. 3. 25. 15:03
navbar를 위쪽에 고정시킬 때 해당 nvabar height를 제외하고 나머지 영역을 full로 채우고 싶을 때가 있다. 물론 각각의 요소 높이를 지정할 수 있지만 나머지 height를 찾은 후에 설정하고 싶을때 css calc 함수를 사용한다.
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.section{
height: 100vh;
background-color: #0f5132;
}
.navbar {
width:100%;
height:100px;
background-color: red;
}
.container{
width:100%;
height: calc(100% - 80px);
background-color: #0a53be;
}
</style>
</head>
<body>
<div class="section">
<div class="navbar">
navbar 영억
</div>
<div class="container">
container 영억
</div>
</div>
</body>
</html>
<결과>
'IT 족집게 > 개발' 카테고리의 다른 글
| 크롬 익스텐션 개발 기본 구조 및 개념, 쉽게 알아보자 (0) | 2022.03.28 |
|---|---|
| ckeditor 5 bootstrap modal과 같이 쓸 시 pannel 안보이는 현상 (0) | 2022.03.27 |
| css box-shadow 사용 방법 (0) | 2022.03.25 |
| Javascript insertBefore로 요소 전으로 순서 바꾸기 (0) | 2022.03.24 |
| css 글자 크기 부모 요소에 따라가게 설정 (0) | 2022.03.24 |