如何只让内容滚动和rest保持不变

Question

我有一些麻烦，以获得一个唯一的滚动内容。我有一个底部列表在顶部，我的滚动内容在中间，和一个xAxis直接在我的滚动内容(需要“附加”到滚动内容)。

我的滚动内容应该滚动，如果它比页面大。如果没有，滚动条应该消失，我的xAxis应该在滚动内容下面(而不是固定在底部)。

到目前为止，这就是我所拥有的：

<div id="wrapper">
<button type="button">1 HR</button>
<button type="button">2 HR</button>
<button type="button">3 HR</button>
<button type="button">4 HR</button>
<button type="button">5 HR</button>

<div id="outer">
    <div class="content">
        <myChart></gantt-chart>
    </div>
</div>
<div class="xAxisOfMyChart"></div>

​

和：

#wrapper {
   position: relative;
   height: auto;
}

#outer {
   margin-top: 20px;
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
}

.overflow-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 80%;
    z-index: 1;
 }

#wrapper:before,
#wrapper:after {
   z-index: 2;
   position: absolute;
   content: "";
   display: block;
}

#wrapper:after {
   bottom: 0;
}

#wrapper:before {
   top: 0;
}

基本上，我把自己定位在：内部div元素通过外滚动条滚动

和口香糖

Answer 1

给您的内容一个固定的高度，然后overflow-y:scroll;查看小提琴或运行代码段。为了示例的目的，我将主体设置为600 of，内容为450 of。图大于450 is。

​

#wrapper {
   position: relative;
   height: auto;
}

#outer {
   margin-top: 20px;
   overflow-y: auto;
   overflow-x: hidden;
   height: 600px;
    border:1px solid #ccc;
}

.content {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 450px;
    background-color:red;
    overflow-y:auto;
    z-index: 1;
 }



#wrapper:before,
#wrapper:after {
   z-index: 2;
   position: absolute;
   content: "";
   display: block;
}

#wrapper:after {
   bottom: 0;
}

#wrapper:before {
   top: 0;
}

<div id="wrapper">
<button type="button">1 HR</button>
<button type="button">2 HR</button>
<button type="button">3 HR</button>
<button type="button">4 HR</button>
<button type="button">5 HR</button>

<div id="outer">
    <div class="content">
        <myChart><img src="https://www.virtualboss.net/screenshots/images/ganttchart.gif"></myChart>
    </div>
</div>
<div class="xAxisOfMyChart"></div>

​

Answer 2

设置位置为固定的那些元素，你不想被滚动，你可以修复背景div，而不使其他的固定.