Breite des inneren div auf rollbarem Element auf 100% der scrollbaren Breite setzen

Wie bekomme ich die Breite dieses inneren Inhalts div gleich der Breite des scrollbaren Bereichs?Breite des inneren div auf rollbarem Element auf 100% der scrollbaren Breite setzen

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

mit CSS:

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

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

jsFiddle: http://jsfiddle.net/XBVsR/12/

PROBLEM: wenn Sie blättern über Sie sehen können, dass der Hintergrund nicht den ganzen Weg geht über, wie es sollte.

Ich habe versucht Einstellung Breite: 100%, Überlauf: sichtbar, etc, ohne Erfolg.

EDIT: Ich habe aktualisiert, um klar zu machen, dass ich nicht möchte, dass der Text zu wickeln - ich möchte die horizontale Scroll auf die ganze Sache.

Quelle

2013-07-01 magritte

Müssen Sie den Hintergrund für jeden Text einzeln festlegen? Wäre es nicht einfacher, den scrollbaren Hintergrund festzulegen? –

@ Ms.Nobody, yeah Ich muss sie einzeln einstellen, weil sie eigentlich Teil eines scrollbaren Menüs mit Hintergrund und Rahmen sind. Dies ist nur ein einfaches Beispiel, um das Problem zu isolieren. – magritte

Sie wollen also ein Menü haben, das gescrollt werden muss? Kannst du das Ganze irgendwo hinstellen? Oder nur das Menü, aber mit echten Elementen, weil ich nicht verstehe, warum Menü vertikal scrollbar sein soll: D –

Sie display: table-row; für verschachtelten divs verwenden können. Sehen Sie sich jsfiddle an

Quelle

2013-07-01 13:53:53 YD1m

Einfach und elegant, das ist großartig! – Jaay

Perfecto! Prost, Mann! Irgendwelche Ideen, warum anzeigen: blockieren; funktionierte nicht, während display: table-row tut? – magritte

Ich weiß nicht, wie die Browser-Engine Engine funktionieren soll. Aber ich denke, wenn der Browser überläuft, berücksichtigt der Browser nicht die Breite des verschachtelten ** Blocks **, auf dem der Hintergrund gerendert wird. Im Falle der Verwendung von "Tabellenzeilen" würde die Breite unter Berücksichtigung der enthaltenen Textbreite berechnet. – YD1m

Add-Klasse hier

overflow: auto;

Aktualisiert Geige .content: http://jsfiddle.net/XBVsR/11/

Sie daran erinnern, dass diese alle Elemente mit Klasse .content beeinflussen würde. Vielleicht möchtest du es auch einem anderen Klassennamen geben.

Quelle

2013-07-01 13:51:02

ich denke, er will die Rolle –

Das löst nicht das Problem Mann – Jaay

@MadanlalArora, das ist richtig, ich brauche es zu scrollen. Ich habe tatsächlich auch Leerzeichen: nowrap, um sicherzustellen, dass es scrollt. – magritte

nur diese, um Ihre Inhalte geben

overflow: auto;

Quelle

2013-07-01 13:51:56

http://jsfiddle.net/XBVsR/7/ siehe –

Dies scrollt nur die einzelnen Inhaltselement, aber ich brauche die ganze Sache zu scrollen. – magritte

Sie können nicht, wenn Sie das äußere div auf Breite 300px festlegen möchten. Es ist der ungebrochene Text, der die Bounding Box bricht. Sie können jedoch, wickeln Sie das Wort von diesem auf den Inhalt CSS hinzufügen:

word-wrap: break-word;

Wenn jedoch, dass 300px nicht Sie egal, können Sie den Überlauf verschieben: Auto aus der scrollbaren Klasse auf den Inhalt eines und das sollte auch das Hintergrundproblem beheben.

Quelle

2013-07-01 13:54:22 GoGoCarl

Breite des inneren div auf rollbarem Element auf 100% der scrollbaren Breite setzen

Antwort

Verwandte Themen