CSS는 3 중 중간 요소 만 스크롤합니다.

순수 CSS에서는 첫 번째 요소가 항상 맨 위에 있고 세 번째 요소는 항상 맨 아래에 있고 두 번째 요소는 항상 맨 아래에있는 세로 레이아웃을 얻으려고합니다. 중간.CSS는 3 중 중간 요소 만 스크롤합니다.

3 개의 요소는 오버플로없이 겹치지 않고 상위 요소 높이의 100 %를 채 웁니다.

모든 요소의 크기가 변경 될 수 있습니다. 고정 된 위치 지정을 사용하는 것은 실현 불가능합니다. 왜냐하면 하단 요소가 확장 될 때 가운데 요소가 그에 따라 높이를 변경해야하기 때문입니다.

또한 콘텐츠가 맞지 않을 때 가운데 하나를 스크롤하고 싶습니다.

때 스크롤 I 중간 요소를 만들 수 없습니다 flex를 사용
, fixed 위치가 중간 요소를 조정하지 않는 높이를 바닥 요소의 크기를 조정 할 때 사용 :

지금, 나는 성공없이 몇 가지 다른 방법을 시도 그들은 넘쳐 흐른다.

나는 최근에 약 sticky 위치를 찾았습니다.이 경우 가능한 사용 사례처럼 보입니다. 그러나 나는 잘 모릅니다.

어떻게이 포지셔닝 체계를 얻을 수 있습니까?

편집 :없이 크기를 조정할 수 자유롭게 상단과 하단 요소,

https://jsfiddle.net/f4scm02y/1/

내가 파란색 부분을하고자하는 빨간색과 녹색 부분에 의해 제약되고 : 여기 바이올린은 당신에게 아이디어를주고 있어요 겹침을 초래했다.

출처

2017-11-23 AkiRoss

당신이 jsFiddle 또는 Codepen과에 예를 가지고 있나요/또는 당신이 그것을 게시 할 수 있습니까? – SamJakob

나는 그것을 즉시 만들 것이다. – AkiRoss

사실, 끈적 거리는 것이 정확히 필요한 것 같지만 ... 브라우저 지원이 부족합니다. – AkiRoss

당신은 인 flexbox으로 작업을 수행 할 수 있습니다

/* reset browser defaults */ 
 
* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
/* 
 
html { 
 
    height: 200px; 
 
} 
 

 
body { 
 
    position: absolute; 
 
} 
 
*/ 
 

 
#container { 
 
    display: flex; /* displays children inline by default */ 
 
    flex-direction: column; /* stacks children vertically */ 
 
    height: 100vh; /* for better presentation */ 
 
    background-color: #FFF; 
 
} 
 

 
#top { 
 
    background-color: #FCC; 
 
} 
 

 
#middle { 
 
    background-color: #CFC; 
 
    overflow: auto; /* recommended */ 
 
    flex: 1; /* takes all the remaining vertical space */ 
 
} 
 

 
#bottom { 
 
    background-color: #CCF; 
 
    /* 
 
    position: absolute; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    */ 
 
}

<body> 
 
    <div id="container"> 
 
    <div id="top"> 
 
     Top has variable height<br/> 
 
     but usually rather short. 
 
    </div> 
 

 
    <div id="middle"> 
 
     Middle has variable height<br/> 
 
     and usually it is pretty long.<br/> 
 
     This content must be scrolled<br/> 
 
     and it should expand as much<br/> 
 
     as possible.<br/> 
 
     Lorem ipsum dolor sit amet, consectetur<br/> 
 
     adipiscing elit, sed do eiusmod tempor<br/> 
 
     incididunt ut labore et dolore magna aliqua.<br/> 
 
     Ut enim ad minim veniam, quis nostrud<br/> 
 
     exercitation ullamco laboris nisi ut aliquip<br/> 
 
     ex ea commodo consequat. Duis aute irure <br/> 
 
     dolor in reprehenderit in voluptate velit<br/> 
 
     esse cillum dolore eu fugiat nulla pariatur.<br/> 
 
     Excepteur sint occaecat cupidatat non proident,<br/> 
 
     sunt in culpa qui officia deserunt<br/> 
 
     mollit anim id est laborum 
 
      Middle has variable height<br/> 
 
     and usually it is pretty long.<br/> 
 
     This content must be scrolled<br/> 
 
     and it should expand as much<br/> 
 
     as possible.<br/> 
 
     Lorem ipsum dolor sit amet, consectetur<br/> 
 
     adipiscing elit, sed do eiusmod tempor<br/> 
 
     incididunt ut labore et dolore magna aliqua.<br/> 
 
     Ut enim ad minim veniam, quis nostrud<br/> 
 
     exercitation ullamco laboris nisi ut aliquip<br/> 
 
     ex ea commodo consequat. Duis aute irure <br/> 
 
     dolor in reprehenderit in voluptate velit<br/> 
 
     esse cillum dolore eu fugiat nulla pariatur.<br/> 
 
     Excepteur sint occaecat cupidatat non proident,<br/> 
 
     sunt in culpa qui officia deserunt<br/> 
 
     mollit anim id est laborum 
 
      Middle has variable height<br/> 
 
     and usually it is pretty long.<br/> 
 
     This content must be scrolled<br/> 
 
     and it should expand as much<br/> 
 
     as possible.<br/> 
 
     Lorem ipsum dolor sit amet, consectetur<br/> 
 
     adipiscing elit, sed do eiusmod tempor<br/> 
 
     incididunt ut labore et dolore magna aliqua.<br/> 
 
     Ut enim ad minim veniam, quis nostrud<br/> 
 
     exercitation ullamco laboris nisi ut aliquip<br/> 
 
     ex ea commodo consequat. Duis aute irure <br/> 
 
     dolor in reprehenderit in voluptate velit<br/> 
 
     esse cillum dolore eu fugiat nulla pariatur.<br/> 
 
     Excepteur sint occaecat cupidatat non proident,<br/> 
 
     sunt in culpa qui officia deserunt<br/> 
 
     mollit anim id est laborum 
 
      Middle has variable height<br/> 
 
     and usually it is pretty long.<br/> 
 
     This content must be scrolled<br/> 
 
     and it should expand as much<br/> 
 
     as possible.<br/> 
 
     Lorem ipsum dolor sit amet, consectetur<br/> 
 
     adipiscing elit, sed do eiusmod tempor<br/> 
 
     incididunt ut labore et dolore magna aliqua.<br/> 
 
     Ut enim ad minim veniam, quis nostrud<br/> 
 
     exercitation ullamco laboris nisi ut aliquip<br/> 
 
     ex ea commodo consequat. Duis aute irure <br/> 
 
     dolor in reprehenderit in voluptate velit<br/> 
 
     esse cillum dolore eu fugiat nulla pariatur.<br/> 
 
     Excepteur sint occaecat cupidatat non proident,<br/> 
 
     sunt in culpa qui officia deserunt<br/> 
 
     mollit anim id est laborum 
 
      Middle has variable height<br/> 
 
     and usually it is pretty long.<br/> 
 
     This content must be scrolled<br/> 
 
     and it should expand as much<br/> 
 
     as possible.<br/> 
 
     Lorem ipsum dolor sit amet, consectetur<br/> 
 
     adipiscing elit, sed do eiusmod tempor<br/> 
 
     incididunt ut labore et dolore magna aliqua.<br/> 
 
     Ut enim ad minim veniam, quis nostrud<br/> 
 
     exercitation ullamco laboris nisi ut aliquip<br/> 
 
     ex ea commodo consequat. Duis aute irure <br/> 
 
     dolor in reprehenderit in voluptate velit<br/> 
 
     esse cillum dolore eu fugiat nulla pariatur.<br/> 
 
     Excepteur sint occaecat cupidatat non proident,<br/> 
 
     sunt in culpa qui officia deserunt<br/> 
 
     mollit anim id est laborum 
 
      Middle has variable height<br/> 
 
     and usually it is pretty long.<br/> 
 
     This content must be scrolled<br/> 
 
     and it should expand as much<br/> 
 
     as possible.<br/> 
 
     Lorem ipsum dolor sit amet, consectetur<br/> 
 
     adipiscing elit, sed do eiusmod tempor<br/> 
 
     incididunt ut labore et dolore magna aliqua.<br/> 
 
     Ut enim ad minim veniam, quis nostrud<br/> 
 
     exercitation ullamco laboris nisi ut aliquip<br/> 
 
     ex ea commodo consequat. Duis aute irure <br/> 
 
     dolor in reprehenderit in voluptate velit<br/> 
 
     esse cillum dolore eu fugiat nulla pariatur.<br/> 
 
     Excepteur sint occaecat cupidatat non proident,<br/> 
 
     sunt in culpa qui officia deserunt<br/> 
 
     mollit anim id est laborum 
 
    </div> 
 

 
    <div id="bottom"> 
 
     Bottom has variable height<br/> 
 
     but usually rather short. 
 
    </div> 
 
    </div> 
 
</body>

비결은 유연한 height의 #middle 하나를 만드는 것입니다.

출처

2017-11-23 13:20:06 VXp

니스! 하지만 분명히 하단에 몇 가지 중복이 있습니다 : ( – AkiRoss

그것은 지금 큰 작품 :) 감사합니다! – AkiRoss

나는 제대로 이해하고 있는지 잘 모르겠다.하지만 항상 빨간색이 항상 겹쳐 지도록하려면 녹색을 스크롤하고 파란색은 녹색 겹치지 않고 아래쪽에 있어야합니다. 단순히 제거하면됩니다.

position:absolute;

# bottom CSS. 이 같은

#bottom { 
    background-color: #CCF; 
    bottom: 0px; 
    right: 0px; 
    left: 0px; 
}

출처

2017-11-23 13:23:50

감사합니다.사실 나는 그 해결책을 생각하지 못했지만 문제는 컨테이너가 실제로 부모를 오버플로한다는 것입니다 : https://jsfiddle.net/f4scm02y/2/ – AkiRoss

@AkiRoss 나는 당신이 달성하려는 것을 이해하지 못합니다. ? 초록색을 스크롤 할 때 스크롤 하시겠습니까? 또한 body 클래스에서 고정 높이를 제거 할 수 있습니다. –

정확히 @VXp가 필요했던 :) 어쨌든 고마워요! (btw 아니오, 높이 고정) – AkiRoss

CSS는 3 중 중간 요소 만 스크롤합니다.

답변

관련 문제