절대 위치 + 스크롤링

102

다음 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있습니까?

html css

— 크리스 믹
소스

왜 top : 0이 있는지 물어봐도 될까요? 거기도?

— Patsy Issa 2013

특별한 이유를 아니, 내가 지정하는 것 이상의 습관이

— 크리스 미크

제거 top: 0;하면 더 이상 작동하지 않습니다.

— Brewal

JS to calc가 없으면 innerHeight어려울 것입니다. 안타깝게도 position:fixed컨테이너 내부에서 작동하지 않습니다. 왜냐하면 흐름에서 벗어나기 때문에이 '해결 방법'도 작동하지 않을 것입니다 :(

— RaphaelDDL

90

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.

코드 스 니펫 표시

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

<div class="container">
  <div class="inner">
    <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>
</div>

스 니펫 확장

http://jsfiddle.net/M5cTN/

— giaour
소스

물론, 그 사실이 너무 감각의 일종하게 (어떤 CSS는 의미가하는 방식을))

— 크리스 미크

7

fill-height요소는 명확하지 영업 이익이 정박 할 않았다 컨텐츠로 스크롤입니까? (파란색 배경을 배경 이미지로 변경하면 그것이 고정되지 않았다고 말할 때의 의미를 알 수 있습니다. jsfiddle.net/M5cTN/82 )

— paulvs

35

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스크롤 그 아래.

— Flaschbier
소스

67

고정 위치는 브라우저를 기준으로 요소를 배치하므로 원하는 결과가 아닐 수 있습니다.

— Avand Amiri 2014 년

상단, 좌, 우, 하단 위치를 지정하지 않으면 고정 요소가 창에 상대적으로 배치되지 않습니다. 그러나 이것은 물론 사용이 제한되어 있으며 기본 왼쪽 상단 위치로만 설정됩니다. 그렇지 않으면 창에 상대적으로 배치되고 또 다른 단점이 있습니다. 너비 : 100 % 또는 높이 : 100 %는 창 크기와 동일합니다

— Herbi Shtini

1

transform: translate3d(0,0,0);부모에 대한 position: fixed상대적인 원인 이 될 것 입니다. 소스 coderwall.com/p/2wzj-a/…

— lkraav

9

따라서 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가 컨테이너 오른쪽에 있으면 스크롤바를 숨 깁니다.

— papillon

0

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

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

— Tibor Udvari
소스