절대 위치 + 스크롤링
다음 HTML과 함께CSS
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}<div class="container">
<div class="full-height">
</div>
</div>내부 div는 원하는대로 컨테이너의 전체 헤드를 차지합니다. 이제 다음과 같은 다른 흐름 콘텐츠를 컨테이너에 추가하면
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}<div class="container">
<div class="full-height">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>그런 다음 컨테이너가 원하는대로 스크롤되지만 절대적으로 배치 된 요소는 더 이상 컨테이너의 맨 아래에 고정되지 않고 컨테이너의 처음 볼 수있는 맨 아래에서 멈 춥니 다. 내 질문은; 절대 위치 요소를 사용하지 않고 컨테이너의 전체 스크롤 높이로 만드는 방법이 JS있습니까?
div요소에 텍스트를 래핑하고 그 안에 절대 위치 요소를 포함해야합니다.
<div class="container">
<div class="inner">
<div class="full-height"></div>
[Your text here]
</div>
</div>
CSS :
.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }
Setting the inner div's position to relative makes the absolutely position elements inside of it base their position and height on it rather than on the .container div, which has a fixed height. Without the inner, relatively positioned div, the .full-height div will always calculate its dimensions and position based on .container.
position: fixed; will solve your issue. As an example, review my implementation of a fixed message area overlay (populated programmatically):
#mess {
position: fixed;
background-color: black;
top: 20px;
right: 50px;
height: 10px;
width: 600px;
z-index: 1000;
}
And in the HTML
<body>
<div id="mess"></div>
<div id="data">
Much content goes here.
</div>
</body>
When #data becomes longer tha the sceen, #mess keeps its position on the screen, while #data scrolls under it.
So gaiour is right, but if you're looking for a full height item that doesn't scroll with the content, but is actually the height of the container, here's the fix. Have a parent with a height that causes overflow, a content container that has a 100% height and overflow: scroll, and a sibling then can be positioned according to the parent size, not the scroll element size. Here is the fiddle: http://jsfiddle.net/M5cTN/196/
and the relevant code:
html:
<div class="container">
<div class="inner">
Lorem ipsum ...
</div>
<div class="full-height"></div>
</div>
css:
.container{
height: 256px;
position: relative;
}
.inner{
height: 100%;
overflow: scroll;
}
.full-height{
position: absolute;
left: 0;
width: 20%;
top: 0;
height: 100%;
}
참고URL : https://stackoverflow.com/questions/17656623/position-absolute-scrolling
'your programing' 카테고리의 다른 글
| Python의 중첩 함수 (0) | 2020.10.11 |
|---|---|
| 중복 키를 허용하는 C # 정렬 가능한 컬렉션 (0) | 2020.10.10 |
| RecyclerView.ViewHolder-getLayoutPosition 대 getAdapterPosition (0) | 2020.10.10 |
| `—` 또는`—` HTML 출력에 차이가 있습니까? (0) | 2020.10.10 |
| RSpec에서 IT 블록과 지정 블록의 차이점 (0) | 2020.10.10 |