Mutlak Konum + Kaydırma

Question 1

Aşağıdaki ile HTMLveCSS

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

Snippet'i genişlet

İç kısım div, istendiği gibi kabın tam kafasını alır. Şimdi kapsayıcıya başka bir akış içeriği eklersem, örneğin:

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

Snippet'i genişlet

Daha sonra kap istendiği gibi kaydırılır, ancak mutlak olarak konumlandırılmış eleman artık kabın tabanına sabitlenmez, ancak kabın ilk görülebilen dibinde durur. Sorum şu; Mutlak konumlandırılmış elemanın, kullanmadan kabının tam kaydırma yüksekliğine sahip olmasının bir yolu var JSmı?

Question 2

Metni bir divöğeye kaydırmanız ve kesinlikle konumlandırılmış öğeyi onun içine dahil etmeniz gerekir .

<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'in konumunu relative, içindeki mutlak konum öğelerinin .containersabit bir yüksekliği olan div yerine konumlarını ve yüksekliklerini ona dayandıracak şekilde ayarlamak . İç olmadan, görece konumlandırılmış div, .full-heightdiv her zaman boyutlarını ve konumunu temel alarak hesaplayacaktır .container.

Kod parçacığını göster

* {
  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>

Snippet'i genişlet

http://jsfiddle.net/M5cTN/

Question 3

position: fixed;sorununuzu çözecek. Örnek olarak, sabit bir mesaj alanı kaplaması (programlı olarak doldurulmuş) uygulamamı inceleyin:

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

Ve HTML'de

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

Ne zaman #datasceen tha uzarsa, #messolurken, ekranda konumunu korur #datakaydırır altında.

Question 4

Öyleyse gaiour haklı, ancak içerikle kaydırılmayan, ancak aslında kabın yüksekliği olan tam yükseklikte bir öğe arıyorsanız, işte düzeltme. Taşmaya neden olan yüksekliğe sahip bir ebeveyne,% 100 yüksekliğe sahip bir içerik konteynırına overflow: scrollve ardından kaydırma öğesi boyutuna göre değil ebeveyn boyutuna göre konumlandırılabilen bir kardeşe sahip olun. İşte keman: http://jsfiddle.net/M5cTN/196/

ve ilgili kod:

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

Question 5

Bu durumla karşılaştım ve fazladan bir div oluşturmak pratik değildi. Sadece full-heightdiv'i ayarladımheight: 10000%; overflow: hidden;

Açıkçası en temiz çözüm değil, ama gerçekten hızlı çalışıyor.