[html] 절대 위치 + 스크롤링

Program / 글쓴이

다음 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%; }

내부 div의 위치를 ​​설정하면 내부 div의 relative절대 위치 요소 .container가 높이가 고정 된 div가 아닌 위치와 높이를 기준으로합니다 . 상대적 위치, 내주없이 div상기 .full-heightDIV 항상에 기초하여 그 크기 및 위치를 계산한다 .container.

코드 스 니펫 표시

http://jsfiddle.net/M5cTN/

답변

position: fixed;문제를 해결할 것입니다. 예를 들어 고정 메시지 영역 오버레이 (프로그래밍 방식으로 채워짐) 구현을 검토합니다.

#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

그리고 HTML에서

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

때 #datasceen 그쪽으로 길어, #mess동안, 화면의 위치를 유지 #data스크롤 그 아래.

답변

따라서 gaiour가 맞지만 콘텐츠와 함께 스크롤되지 않지만 실제로 컨테이너의 높이 인 전체 높이 항목을 찾고 있다면 여기에 수정 사항이 있습니다. 오버플로를 유발하는 높이를 가진 부모, 높이가 100 % 인 콘텐츠 컨테이너 overflow: scroll, 및 형제는 스크롤 요소 크기가 아닌 부모 크기에 따라 배치 될 수 있습니다. 다음은 바이올린입니다. http://jsfiddle.net/M5cTN/196/

및 관련 코드 :

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%;
}

답변

나는이 상황에 부딪 쳤고 추가 div를 만드는 것은 비현실적이었습니다. 나는 full-heightdiv를 다음으로 설정 했습니다.height: 10000%; overflow: hidden;

분명히 가장 깨끗한 솔루션은 아니지만 정말 빠르게 작동합니다.

답변