Hat Position horizontal fixiert wird aber in der Lage vertikal

Question

-Update blättern: Link zu site

Was ich frage ist, was eine CSS-Positionierungslösung wäre ein Element zu ermöglichen, horizontal bleiben festgelegt, sondern nach oben und unten, weil wenn Sie die Karte und die rechte Seite geordnete Liste zu fest eingestellten erlaubt es nicht, dass Sie nach unten scrollen

Hier ein Bild von der Seite ist

Was will ich für die ist drei Spaltengitter horizontal zu befestigen, aber für sie vertikal zu scrollen. Dies liegt daran, dass die rote Linie über die rechte Seite hinausgeht. Hier ist die HTML-Struktur:

<h3 class="yo">Crimes per ward</h3> 
<h1 class="click-to-see"><a class="link-ward see-by-ward"href="/cases/wards">Click To See By Ward</a> </h1> 
<h1 class="click-to-see"><a class="link-ward see-by-crime-count"href="/cases/wards">Click To See By Crime Count</a> </h1> 

<div class="d3-wrapper"> 
    <span class="load-animation" style="background:url(../img/dashinfinity.gif) no-repeat center center;width:150px;height:150px;"></span> 
</div> 
<div class="ward-wrapper"> 
    <article class="map-wrapper"></article> 
    <article class="ward-info"></article> 
    <article class="specific-data"></article> 
</div> 

css

.map-wrapper { 
    margin-left: 10%; 
    float: left; 
    width: 30%; 
} 
.ward-info { 
    padding-left: 8%; 
    display: inline-block; 
    width: 30%; 
    position: fixed; 
} 
.specific-data { 
    margin-left: 10%; 
    float: right; 
    width: 30%; 
} 

Alles aber die drei Säulengitterelemente haben Position: statisch, so dass sie blättern vert und horiz.

Answer 1

legt es in einer Antwort von einem Kommentar (meine eigenen Kommentar)

Wäre es nicht einfacher, die roten Punkte festgelegt zu machen und Scroll-fähig statt der Boden folgen zu machen? (Ich denke, das ist, was er meint. Dass, wenn er von links nach rechts scrollt, der untere Teil in Sicht bleibt, fixiert, aber er kann immer noch auf und ab scrollen) Also, warum nicht einen width:100% auf den oberen Teil mit overflow-x:scroll setzen, stattdessen? Rollen Sie innerhalb des roten Punktbehälters anstatt auf der gesamten Webseite

Answer 2

Ich habe hinzugefügt: 0 auto; nur zum Hauptdiv, da alle Innenobjekte seiner Bewegung folgen, die vertikal scrollen soll. Die Bildlaufleiste sollte erscheinen, wenn die Seitenhöhe < Seiteninhalt Höhe ist. Löschen 'Rand links: 10%; es sei denn, das ist der Spaltenabstand. Die Einstellung "Auto" zentriert ein Div auf der Seite und ermöglicht vertikales Scrollen.

<div class="d3-wrapper"> 
    <span class="load-animation" style="margin:0 auto;background:url(../img/dashinfinity.gif) no-repeat center center;width:150px;height:150px;"></span> 
</div> 
<div class="ward-wrapper"> 
    <article class="map-wrapper"></article> 
    <article class="ward-info"></article> 
    <article class="specific-data"></article> 
</div> 

Answer 3

Die Antwort zu meinem Problem war, Position zu entfernen: örtlich festgelegt von allen Elementen innerhalb des drei Spaltengitters und stellen Sie dann das div um die Linie der roten Kreise zur Position ein behoben mit einer zusätzlichen Eigenschaft von overflow-x: scroll;

Vielen Dank für die Vorschläge und Hilfe!

<div class="wrapper"></div> 
    <h3 class="yo">Crimes per ward</h3> 
    <h1 class="click-to-see"> 
    <a class="link-ward see-by-ward"href="/cases/wards">Click To See By Ward</a> </h1> 
    <h1 class="click-to-see"> 
    <a class="link-ward see-by-crime-count"href="/cases/wards">Click To See By Crime Count</a> 
    </h1> 

<div class="d3-wrapper"> 
    <span class="load-animation" style="background:url(../img/dashinfinity.gif) no-repeat center center;width:150px;height:150px;"></span> 
</div> 
<div class="ward-wrapper"> 
    <article class="map-wrapper"></article> 
    <article class="ward-info"></article> 
    <article class="specific-data"></article> 
</div> 
</div> 

css

.d3-wrapper { 
    overflow-x:scroll; 
} 

.map-wrapper { 
    padding-left: 10%; 
    float: left; 
    width: 30%; 
} 
.ward-info { 
    padding-left: 8%; 
    display: inline-block; 
    width: 30%; 
} 

.specific-data { 
    padding-left: 10%; 
    float: right; 
    width: 30%; 
}