[html] 부모와 상관없이 width 100% 주기 (+가로 스크롤x)

width: 고정px

margin:0 auto

를 이용해서 내용들을 중앙정렬했는데, 자식 요소들 중에서 가로 너비를 창크기와 같게 해야 하는 일이 생겼다. width: 100% 를 쓰면 상대적으로 계산돼서 부모의 width와 같게 된다.

그래서 width: 100% 대신

width:100vw;

margin-left: calc(-50vw + 50%);

를 자식 요소에 넣어주면 부모와 상관없이 너비를 창 크기와 같게 할 수 있다. 하지만 이렇게 하면 가로 스크롤이 생긴다. 양옆에 약간의 여백도 있다.

양 옆의 여백은 body의 margin 때문이다. 개발자도구에서 확인해보고 body에 margin: 0 속성을 준다. 가로 스크롤이 생긴 이유는 width:100vw에 세로 스크롤까지 포함됐기때문이다. 최상위 div를 다른 div로 감싸고 그 div에 overflow-x:hidden , overflow-y:hidden 속성을 준다.

파란 선이 main div, 초록 선이 너비가 창 크기와 같은 sub div라고 치면 이런 느낌의 코드이다.

html

 <html>
	<head>
		<link rel="stylesheet" href="style.css">
	 </head>
 
	<body>
		 
		<div class="main_body">
			<div class="sub_body"/>
		</div>
		 
	</body>
</html>

css

body {
   margin:0;
}
 .wrapper{
   overflow-y:hidden;
   overflow-x:hidden;
   width:100%;
}
.main_body {
   width:500px;
   margin: 0 auto;    
   height:800px;
   border:1px solid blue;
   
}
.sub_body { 
   width:100vw;
   margin-left: calc(-50vw + 50%);   
   height:200px;
   border:1px solid green;
  
}

나는 레이아웃 뜯어고칠 엄두가 안나서 이렇게 했는데 애초에 %로만 동작하게 만드는게 좋은 코드인 것 같다.

참고

https://skout90.github.io/2017/09/01/CSS/full-width-ignore-parent/

저작자표시

'개발 > 개발 방법 정리' 카테고리의 다른 글

[gitlab] spring boot(gradle)+jenkins+docker을 이용한 자동 배포 구축 (0)	2023.03.17
CI/CD 어떻게 구현했는지 흐름 정리 (0)	2023.01.28
cygwin 설치 및 간단한 openmpi 실습 (0)	2021.09.28
[React] 초간단 Fade In/Fade Out 이펙트 구현 (0)	2020.09.16