Vị trí Tuyệt đối + Cuộn

Với những điều sau HTMLvà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>

Bên trong divchiếm toàn bộ đầu của hộp đựng như mong muốn. Nếu bây giờ tôi thêm một số khác, luồng, nội dung vào vùng chứa, chẳng hạn như:

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

Sau đó, vùng chứa sẽ cuộn như mong muốn, tuy nhiên, phần tử được định vị tuyệt đối không còn được neo ở dưới cùng của vùng chứa mà dừng lại ở đáy có thể xem ban đầu của vùng chứa. Câu hỏi của tôi là; Có cách nào để phần tử được định vị tuyệt đối có chiều cao cuộn hoàn chỉnh của vùng chứa mà không sử dụng JSkhông?

Bạn cần bao bọc văn bản trong một divphần tử và bao gồm phần tử được định vị tuyệt đối bên trong nó.

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

Đặt vị trí của div bên trong để relativelàm cho các phần tử có vị trí tuyệt đối bên trong nó dựa vào vị trí và chiều cao của chúng chứ không phải trên .containerdiv, vốn có chiều cao cố định. Không có phần bên trong, được định vị tương đối div, .full-heightdiv sẽ luôn tính toán các kích thước và vị trí của nó dựa trên .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;sẽ giải quyết vấn đề của bạn. Ví dụ: hãy xem lại việc triển khai lớp phủ vùng thông báo cố định (được điền theo chương trình) của tôi:

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

Và trong HTML

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

Khi #dataquyền trượng trở nên dài hơn, hãy #messgiữ nguyên vị trí của nó trên màn hình trong khi #datacuộn dưới nó.

Vì vậy, gaiour đúng, nhưng nếu bạn đang tìm kiếm một mục có chiều cao đầy đủ không cuộn theo nội dung, nhưng thực sự là chiều cao của vùng chứa, thì đây là cách khắc phục. Có phần tử cha có chiều cao gây tràn, vùng chứa nội dung có chiều cao 100% và overflow: scrollsau đó có thể định vị vùng chứa nội dung theo kích thước cha, không phải kích thước phần tử cuộn. Đây là fiddle: http://jsfiddle.net/M5cTN/196/

và mã liên quan:

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

Tôi đã gặp phải tình huống này và việc tạo thêm một div là không thực tế. Tôi đã kết thúc việc chỉ đặt full-heightdiv thànhheight: 10000%; overflow: hidden;

Rõ ràng không phải là giải pháp sạch nhất, nhưng nó hoạt động rất nhanh.