位置絕對+滾動

用下面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？

來源

2013-07-15 Chris Meek

可能我問你爲什麼有頂：0;還有嗎？ –

沒有特別的原因，我有一個過度指定事物的習慣 –

如果你刪除'top：0;'它根本不起作用了。 – Brewal

您需要將文本包裝在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的位置設置爲relative使得其內部的絕對位置的元素基礎它們的位置和高度上，而不是在.container DIV，它有一個固定的高度。如果沒有內部相對定位的div，.full-height div將始終根據.container計算其尺寸和位置。

http://jsfiddle.net/M5cTN/

來源

2013-07-15 14:59:06 giaour

當然，這實際上也有某種意義（就像任何CSS都有意義; ）） –

「fill-height」元素顯然是隨着內容滾動的，OP是不是希望它錨定？（通過將藍色背景更改爲背景圖片，可以看到我的意思，當我說它不是錨定http://jsfiddle.net/M5cTN/82/） – paulvs

非常感謝。找到你的解決方案，經過數小時的搜索... –

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變長塔的sceen，#mess保持在其位置屏幕上，而#data在它下面滾動。

來源

2014-09-28 21:46:51 flaschbier

+24

固定定位將相對於瀏覽器定位元素，這可能不是預期的結果。 –

如果您不指定頂部，左側，右側，底部位置固定元素將不會相對於窗口定位。但是，這當然有限制的使用，只有默認的左上方的位置，否則它將相對於窗口定位，它還有另一個缺點，寬度：100％或高度：100％將與窗口的尺寸相同 –

因此gaiour是正確的，但如果你正在尋找一個完整的高度項目，不與內容滾動，但實際上是容器的高度，這是修復。有一個父母的高度會導致溢出，一個內容容器的高度爲100％，然後可以根據父母的大小定位兄弟，而不是滾動元素的大小。這裏是小提琴：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%; 
}

來源

2015-03-20 20:47:42 TorranceScott

位置絕對+滾動

回答

相關問題