將可滾動元素上內部div的寬度設置爲可滾動寬度的100％

如何獲取此內部內容div的寬度等於可滾動區域的寬度？將可滾動元素上內部div的寬度設置爲可滾動寬度的100％

<div class="scrollable"> 
    <div class="content">short</div> 
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div> 
</div>

與CSS：

.scrollable { 
    width: 300px; 
    height: 300px; 
    overflow: auto; 
} 

.content { 
    background-color: lightblue; 
    white-space: nowrap; 
}

的jsfiddle：http://jsfiddle.net/XBVsR/12/

問題：如果您滾動越過你可以看到，背景不走跨越，因爲它應該一路。

我試過設置寬度：100％，溢出：可見等，無濟於事。

編輯：我已經更新，以清楚表明我不希望文字換行 - 我想整個事情的水平滾動。

來源

2013-07-01 magritte

是否需要爲每個文本分別設置背景？設置可滾動背景不是更容易嗎？ –

@ Ms.Nobody，是的，我需要單獨設置它們，因爲它們實際上是具有背景和邊框的可滾動菜單的一部分，這只是一個簡單的例子來隔離問題。 – magritte

所以你想有菜單，將不得不滾動？你能把整個事情放在什麼地方嗎？或者只是菜單，但與真實的項目，因爲我不明白爲什麼你想要菜單可以垂直滾動：D –

可以使用display: table-row;嵌套的div。看看jsfiddle

來源

2013-07-01 13:53:53 YD1m

簡單而優雅，太棒了！ – Jaay

Perfecto！乾杯兄弟！任何想法爲什麼顯示：塊;沒有工作，而顯示：錶行呢？ – magritte

我不知道瀏覽器渲染引擎如何工作。但我想，當發生溢出時，瀏覽器不會考慮嵌套** block **的寬度，在該塊上渲染背景。在使用'table-row'寬度的情況下，將考慮包含的文本寬度進行計算。 – YD1m

添加到。內容類

overflow: auto;

更新這裏提琴：http://jsfiddle.net/XBVsR/11/

請記住，這會影響帶班。內容的所有元素。你可能想給它另一個類的名字。

來源

2013-07-01 13:51:02

我認爲他想要滾動 –

這不解決問題花花公子 – Jaay

@MadanlalArora這是正確的，我需要它滾動。我其實也有空白：nowrap以確保它滾動。 – magritte

只是把這個給你的內容

overflow: auto;

來源

2013-07-01 13:51:56

http://jsfiddle.net/XBVsR/7/看到這個 –

這只是滾動個別的內容元素，但我需要整個事情滾動。 – magritte

如果你打算將外部div設置爲寬度300px，那麼你不能這樣做。這是打破邊框的完整文本。你可以，但是，加入這內容CSS包裹詞：從滾動級車展的內容之一：

word-wrap: break-word;

但是，如果300像素不要緊，你可以將溢出而且這也應該解決背景問題。

來源

2013-07-01 13:54:22 GoGoCarl

將可滾動元素上內部div的寬度設置爲可滾動寬度的100％

回答

相關問題