[CSS] Height 100% 하는법

Front-End/HTML5 + CSS

[CSS] Height 100% 하는법

리딩리드 2016. 12. 13. 15:45

Height 100% 하는법

1. 원인

- 요소의 크기가 width: 100%는 되지만 height:100%는 되지 않는다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ border : 2px solid coral; width: 100%; height:100%; } </style> </head> <div id="height"> </div>

- 사진처럼 width 만 적용되고 height는 적용되지 않아 줄처럼 보인다

2. 해결

- html, body 태그에 높이 지정

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html,body{ height:100%; overflow: hidden; } div{ border : 2px solid coral; width: 100%; height:100%; } </style> </head> <div id="height"> </div>

- height가 적용되었다

- %는 기준으로 삼을 높이가 필요하지만 기존에는 없기 때문에 기준 삼을 높이 html, body 태그를 지정했다