帶有水平滑動內容的底部div

Question

我需要一個總是位於頁面底部的div，左邊是172px，右邊是383px。

這個div將有一些圖像和文本以及左右按鈕。 例如，當您將鼠標懸停在右側按鈕時，在達到div的寬度限制后，“不可見”的內容將從右側開始顯示，滑動左側的內容。

我嘗試使用position:fixed; bottom:0px position:fixed; bottom:0px ，但我無法position:fixed; bottom:0px div，當屏幕尺寸發生變化時，它的寬度不會改變...

例如，這正是我想要的（底部的黑色div）：

如果您知道任何jquery插件可以執行我想要的操作，或者您知道如何執行此類操作，請幫助我！

Answer 1

如果您使用的是position: fixed ，則無法應用margin。 您可以指定left和right屬性。

position: fixed;
right: 383px;
bottom: 0;
left: 172px;

我知道這並不是你要求的，但你可以在該div上設置white-space和overflow屬性，使其顯示水平滾動條。

white-space: nowrap;
overflow: auto;

用戶將使用底部的滾動條移動div的內容。 這是一個例子： http ： //jsfiddle.net/rustyjeans/5nv84/

要使用jQuery set overflow: hidden並添加一些調整div的scrollLeft的函數，然后添加一些控件來調用這些函數。 這是一個例子： http ： //jsfiddle.net/rustyjeans/FtSGn/

Answer 2

這不應該太難。 您想要一個包含具有查看器尺寸的div。 然后，在那個內部有一個div，其位置絕對和尺寸超出了觀察者的寬度。 當箭頭懸停在使用jquery上以更改內部div的“left”css屬性時。 這有幫助嗎？

編輯：外部div應該有“position：relative;” 確保內部div相對於其邊緣定位。