programing

위치 절대 + 스크롤

stoneblock 2023. 9. 6. 21:43

위치 절대 + 스크롤

다음과 같이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?

텍스트를 a로 감싸야 합니다.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%; }

이너 디브의 위치를 다음과 같이 설정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/

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>

언제#data장면보다 더 길어지고,#mess화면에 위치를 유지하는 동안#data그 밑에 두루마리가 있습니다.

따라서 gaiour가 맞지만 내용과 함께 스크롤하지 않고 실제로 컨테이너의 높이인 전체 높이 항목을 찾고 있다면 해결 방법은 다음과 같습니다.오버플로우를 유발하는 높이를 가진 부모, 100% 높이를 가진 콘텐츠 컨테이너, 그리고overflow: scroll, 그러면 스크롤 요소 크기가 아닌 부모 크기에 따라 형제를 배치할 수 있습니다.다음은 fiddle: 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%;
}


.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>

제가 이런 상황에 처했는데 추가 디브를 만드는 것은 비현실적이었습니다.제가 결국은 그냥 설정을 하고 말았습니다.full-height에 투혼을 부.height: 10000%; overflow: hidden;

가장 깨끗한 해결책은 아니지만, 매우 빠르게 작동합니다.

다른 답들 중에 잘못된 것이 있는 것은 아니지만, 단지 재미로 원본 토막을 복사했고, 내가 바꾼 것은 전부였습니다.height로.min-height그리고 나는 더 이상 다른 사람을 추가할 필요가 없었습니다.<div>아무 곳이나.

.container {
  position: relative;
  border: solid 1px red;
  min-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>

.bottomDiv {
    position: relative;
    bottom: 0;
}

.parentDiv {
    display: flex;
    flex-direction: column;
}

.theDivPlacedOnTopofBottomDiv {
    flex-grow: 1 !important;
}

언급URL : https://stackoverflow.com/questions/17656623/position-absolute-scrolling

'programing' 카테고리의 다른 글

Ajax.BeginForm은 Ajax 스크립트를 실행하지 않고 포스트백으로 뒤로 넘어갑니다.  (0) 2023.09.06
C에서 음영처리된 전역 변수에 액세스하려면 어떻게 해야 합니까?  (0) 2023.09.06
PHP 구성:시스템의 시간대 설정에 의존하는 것은 안전하지 않습니다.  (0) 2023.09.06
라우터의 공급자가 없습니까?  (0) 2023.09.06
Windows에서 도커를 시작할 수 없음  (0) 2023.09.01

'programing'의 다른글

  • 현재글위치 절대 + 스크롤

관련글

댓글

티스토리툴바