jsstar522
30
2019-06-24 20:46:50
4
183

[CSS] scrollbar가 있는 div안에 fixed div를 넣고 싶어요.


스크롤바가 있는 container div안에 fixed div를 넣고 싶은데요, fixed div는 container div의 넓이랑 같습니다. 단순히 container div안에 fixed div를 넣고 width를 100%로 주니까 container div를 넘어갑니다. 게다가 어찌저찌 fixed div 넓이를 container div에 맞춰도 스크롤바를 가리더라구요. container div 안쪽 너비에 맞춰 fixed div가 생기면서 스크롤바를 가리지 않았으면 합니다. 방법없을까요? ㅜ ㅜ

<div class="wrapper">
  <div>
   Somthing
  </div>
  <div>
   Somthing
  </div>
  <div>
   Somthing
  </div>
  <div>
   Somthing
  </div>
  <div>
   Somthing
  </div>
  <div>
   Somthing
  </div>
  <div>
   Somthing
  </div>
  <div>
   Somthing
  </div>
  <div>
   Somthing
  </div>
  <div class="fixed-bar">
    fixed bar
  </div>
</div>


.wrapper {
  position: relative;
  width: 80%;
  height: 150px;
  border: 1px solid red;
  overflow-y: auto;
}
.fixed-bar {
    position: fixed;
    top: 15px;
    width: 100%;
    height: 30px;
    background: blue;
}




0
0
  • 답변 4

  • moonti
    2k
    2019-06-24 21:40:50

    100%으로 하면 가리죠.

    calc(100% - 10px)로 해보세요

    0
  • jsstar522
    30
    2019-06-24 21:51:00

    @moonti 그렇게 하면 scrollbar가 없을때 10px만큼 비어서 나오지 않나요? 스크롤바가 있을때와 없을 때 모두 100%를 유지하면서 스크롤바를 가리지 않는 방법은 없나요?

    0
  • 프리미엄
    236
    2019-06-25 18:56:14

    Fixed div가 Container div 안에 들어가게 하시려면 fixed div에 position: absolute 값을 주셔야 합니다.

    Fixed값을 넣으면 엘리먼트가 부모 엘리먼트랑 상관없이 아예 floating하기 때문에 반응형 디자인이 필요 없으시다면 이미 하셨던 것처럼 부모 엘리먼트 (container div)의 width와 스크롤링 바를 가리지 않는 width를 주는 식으로 하셔도 되고 아니면 position을 absolute값으로 넣는 걸 추천합니다.

    1
  • jsstar522
    30
    2019-06-26 21:36:39

    @프리미엄 Fixed는 부모 엘리먼트와 상관없이 브라우저에 따라 반응하는군요. 답변 감사합니다!


    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.