개발/개발 방법 정리
[html] 부모와 상관없이 width 100% 주기 (+가로 스크롤x)
슴새
2020. 9. 16. 16:24
반응형
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/
반응형