[css] CSS - 부모요소 안 자식요소 너비를 부모요소 밖으로 화면너비 100% 채우기. (= 부모이탈자식너비전체설정 = 가로전체 = 가로꽉차게 =화면꽉차게 = parent, child, width)

 

<style>

div {

  border:1px solid silver;

  width:50%;

  height:300px;

  margin:0 auto;

  position:relative;

  z-index:9998;

}

nav {

  border-bottom:1px solid red;

  line-height:40px;

  position:absolute;

  width: 100vw;

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

  text-align:center;

}

</style>

 

<div>

  <nav>홈짱닷컴 Homzzang.com </nav>

</div>

 

결과보기

https://stackoverflow.com/questions/31391459

※ vw 단위 : IE9 이상 주요 최신브라우저 모두 지원.

※ calc() 함수 : IE8 이상 주요 최신브라우저 모두 지원.