位置水平固定但能够垂直滚动

Question

更新：链接到site

我要问的是什么是css定位解决方案，允许元素水平固定但向上和向下滚动，因为如果你将地图和右侧有序列表设置为固定它不允许你向下滚动

这是页面的图片

我想要的是三列网格水平固定，但要垂直滚动。这是因为红色圆圈超出了右侧。这是HTML结构：

<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%;
}

除了三列网格元素之外的所有内容都具有位置：静态，因此它们会滚动顶点和水平。

Answer 1

我添加了magin：0 auto;仅限主div，因为所有内部对象都将跟随其运动，即垂直滚动。如果页面高度<1，则应显示滚动条。页面内容高度。删除＆＃39; margin-left：10％;除非那是你的列间距。 ＆＃39; auto＆＃39;设置在页面上居中div并允许垂直滚动。

 <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 2

将其置于评论的答案中（我自己的评论）

将红点固定并滚动而不是让底部跟随它会不容易？ （我认为这就是他的意思。当他从左到右滚动时，底部保持在视线中，固定，但他仍然可以向上和向下滚动）所以，为什么不在顶部放置width:100%与overflow-x:scroll部分相反？在红点容器内滚动而不是在整个网页上滚动

Answer 3

我的问题的答案是删除位置：从三列网格内的所有元素中修复，然后将红色圆圈线周围的div设置为固定，并添加了overflow-x：scroll;

感谢大家的建议和帮助！

<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%;
}