오른쪽 사이드 바가 최소 너비의 내용과 겹칩니다.

Question

이 질문은 많은 시간을 물어 왔지만 아직 이에 대한 결론적 인 답변을 찾을 수 없습니다.

오른쪽 및 왼쪽 100 % 높이, 디자인에 고정 된 사이드 바를 구현하기 위해 노력하고 있습니다. 왼쪽 사이드 바는 훌륭하게 작동하지만 브라우저의 크기를 조정할 때 오른쪽 너비가 (min-width'd) 내용 위로 바뀝니다. 막대의 위치를 ​​절대로 설정하면 가로 창 크기를 조정할 때 잘 동작하지만 세로 막대에서는 사이드 바가 고정되지 않습니다.

체크 아웃 내 jsfiddle을 : http://jsfiddle.net/wjhzyt0u/17/

(당신이 창의 크기를 조절하면, 당신은 중간 회색 콘텐츠를 우측 파란색 막대 플로트를 볼 수 있습니다).

HTML

<div class="wrapper"> 

    <section id="sidebar-nav"> 
    </section> 

    <section id="content"> 
     <p>some rad stylin' content</p> 
    </section> 

    <section id="sidebar-notif"> 
    </section> 

</div> 

CSS

html, body { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

.wrapper { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    min-width: 450px; /* dont want to squish the content too much */ 
} 

#sidebar-nav, #sidebar-notif { 
    position: fixed; 
    height: 100%; 
    width: 150px; 
    background: lightblue; 
} 
#sidebar-nav { 
    top: 0; 
    left: 0; 
} 
#sidebar-notif { 
    top: 0; 
    right: 0; 
} 

#content { 
    margin: 0 150px; 
    height: 300px; 
    background: lightgrey; 
    border: 2px solid yellow; 
} 

어떤 도움을 매우 환영받을 것입니다!

Answer 1

비슷한 상황을 본 다른 사용자를위한 제 '해결책'.

중간 배치 된 사이드 바 (중간 내용의 크기로 조정)로 이동하고 사이드 바 내용을 스크롤하려면 Waypoint sticky plugin을 추가했습니다.

업데이트 JsFiddle는 : http://jsfiddle.net/wjhzyt0u/20/

스티커 div의 스크롤에 페이지 상단에 충실 - 따라서 100 % 높이 사이드 바의 환상을 만드는. 단점은 추가 js 가중치 + 페이지로드 시간입니다.하지만 지금은 적용 해 보겠습니다.

변경 :

.wrapper { 
    position: absolute; 
    width: 100%; 
    min-width: 500px; 
    // removed 100% min-height, which lets the sidebars stretch to 100% height of the content. 
} 

#sidebar-nav, #sidebar-notif { 
    position: absolute; // changed to absolute from fixed. 
    height: 100%; 
    width: 150px; 
    background: lightblue; 
} 

// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin. 
.sticky { 
    border: 1px solid red; 
}