[CSS] 모바일 웹에서 높이(height) 100% 채우기

스크롤 없이 높이가 100% 꽉 차 있는 모바일 웹 제작 중 !

일단 모바일 화면을 만들어야 되니 meta 태그를 추가

<meta name="viewport" content="width=device-width, initial-scale=1.0">

body에 height를 100vh로 지정하면 높이가 꽉 찬 view를 만들 수 있다

height : 100vh;

이렇게 간단하게 끝날 줄 알았는데...

실제 서버에 배포 후 휴대폰으로 확인해보니 스크롤이 있고 위아래로 아주 자유자재 잘 움직인다 🤣

내가 원한 건 스크롤 없이 높이가 100% 꽉 찬 view인데!!!

웹 브라우저와 달리 모바일 브라우저에서는
최상단의 url 주소창과 최하단의 브라우저 버튼 까지를 view port로 인식한다.

그렇기 때문에 <html>, <body> 태그에 height : 100vh;를 지정할 경우

실제 콘텐츠를 나타내는 영역에 모바일 화면의 전체 사이즈의 높이로 계산되어 view가 출력되는 것이다

먼저 내 웹의 구조는 <html> 안에 <body> 안에 <main> 안에.. ㅎ 콘텐츠가 들어있다.

이전에는 <body> 태그에만 height : 100vh;을 지정하였는데

내가 원하는 결과물을 내기 위해서는 <html> 태그와 <body> 태그 내 최상위 태그인 <main>에도 똑같이 지정해야 된다.

html, body, main {
	height : 100vh;
}

<body> 태그 내의 최상위 태그(나의 경우 <main> 태그)에 아래와 같이 position : fixed; overflow : hidden; 설정을 해주어야 된다

main{
	position : fixed;
	overflow : hidden;
}

position : fiexed를 통해 위치를 고정시키고 overflow : hidden;을 적용함으로써

<main>태그 내의 콘텐츠들이 100vh를 벗어나는 경우 스크롤이 생기게 하는 것이 아니라 hidden 처리시켜버리는 것이다.

(약간 야매인가... 🧐)

크롬 브라우저에서 input 자동완성 파란색 배경 없애기 (0)	2022.10.18
[CSS] position: absolute; 가 적용된 element의 z-index가 적용되지 않을때 (0)	2022.05.07
[CSS] IOS에서 <input> element에 적용된 background-color 제거하기 (shadow, border-radius) (0)	2022.02.16
[CSS] <tr>태그에서 display: 'block' 적용시 발생하는 문제 (0)	2022.02.15
[CSS] 브라우저 스타일 초기화 (0)	2021.06.24

개발기록