๐Ÿ“ฑ ๋ชจ๋ฐ”์ผ์—์„œ์˜ 100vh ๐Ÿ˜ซ

์ •์€๊ฒฝยท2020๋…„ 10์›” 12์ผ
0

๐Ÿ‘ธ Front-End Queen

๋ชฉ๋ก ๋ณด๊ธฐ
89/271

๋ชจ๋ฐ”์ผ์—์„œ 100vh๋Š” 100vh๊ฐ€ ์•„๋‹ˆ๋‹น ๐Ÿ˜ญ

๋ชจ๋ฐ”์ผ ํ™”๋ฉด์—์„œ ์Šคํฌ๋กค ์—†์ด ํ™”๋ฉด์„ ๊ฐ€๋“ ์ฑ„์šฐ๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ,
html, body { width: 100%, height: 100% }๋กœ ์„ค์ •ํ•˜๊ณ  ์ดํ›„๋กœ๋„ ์ž์‹ ํƒœ๊ทธ์—๊ฒŒ ๋ชจ๋‘ width, height 100%๋กœ ์„ค์ •ํ•ด์ฃผ์„ธ์š”.
ํ•˜์ง€๋งŒ ์—ฌ๊ธฐ์„œ ์ œ์ผ ์ค‘์š”ํ•œ ๊ฒƒ์€ ํƒœ๊ทธ ์•ˆ์˜ ์ตœ์ƒ์œ„ ๋ถ€๋ชจ๊ฐ€ ๋˜๋Š” ํƒœ๊ทธ์— position: fixed, overflow: hidden์„ ์ค˜์•ผํ•œ๋‹ค๋Š” ๊ฒƒ ์žŠ์ง€ ๋งˆ์„ธ์š”.

*์ถœ์ฒ˜: https://velog.io/@onerain92/CSS-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9B%B9%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%A7%80-%EC%95%8A%EA%B3%A0-%ED%99%94%EB%A9%B4%EC%9D%84-%EA%B0%80%EB%93%9D-%EC%B1%84%EC%9B%8C%EB%B3%B4%EC%9E%90

Reference

profile
#์˜์‹์˜ํ๋ฆ„ #์ˆœ๊ฐ„์ˆœ๊ฐ„ #์ƒ๊ฐ์˜์Šค๋ƒ…์ƒท

0๊ฐœ์˜ ๋Œ“๊ธ€