javascript - 将可滚动的 div 放入固定 div

Question

我必须 div 并且我希望在孩子可滚动时固定父级。

父 div css：

aside{
    height: 100%;
    float: left;
    width: 25%;
    position: fixed;
    border-style: solid;
    border-right-color:rgba(0, 0, 0, 0.2);
    border-top: none;
    border-left: none;
    border-bottom: none;
    margin-top:-5px;
    border-width: 1px;
    z-index: 999999999;
    top:0;
}

孩子一当前的CSS：

#big-title-list{
    padding:0;
    margin-left: 5px;
    margin-right: 5px;
    overflow: scroll;
}

在我的情况下，会出现一个滚动条，但它根本不滚动。顺便说一句，以下页面中的解决方案都没有工作：div with scrollbar inside div with position:fixed。

为了以防万一，我在下面分享了 html 的相关部分：

<aside id=asd1>
    <a href="/"><img class=virus style="margin-top:25px" src="{% static 'icons\virus.png' %}" alt="virus"></a>
    <div class=top-button-holder2>
        <button onclick="showtime2()" class=cmonbut ><span class=spanito3>today</span><span class=spanito2>&#9660;</span></button>
        </div>
    <ul id=big-title-list>
        {% for title in titles2 %}
        <li class=gundem>
            <a href="/today/popular/{{title.url}}--{{title.title_id}}">{{title.title}}---{{title.rating}}</a>
            {% if title.followed_count >= 0 %}
            <div class=title-amount><span class=left-sp>{{title.followed_count}}</span> / <span
                class=right-sp>{{title.amount}}</span></div>   
            {% else %}
            <div class=title-amount>{{title.amount}}</div>   
            {% endif %}
                
            
        </li>

        {% endfor %}
    </ul>
</aside>

标签： javascripthtmlcss

Answer 1

在这里它正在工作，还有一些其他建议：

aside{
  display: flex;
  flex-flow: column;
  position: fixed;
  height: 100%;
  width: 25%;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 1; /* 1 should be enough if there are no other z-index */
  top:0;
  left: 0;
}
#big-title-list{
  flex: 1; /* So it fills the available vertical space */
  padding: 0;
  overflow: hidden;
  overflow-y: auto; /* Only vertical scroll appears, only if needed */
  margin: 0;

  /* These two are just to make the content bigger and force the scroll to appear */
  font-size: 18px;
  line-height: 3;
}

<aside id=asd1>
    <a href="/"><img class=virus style="margin-top:25px" src="{% static 'icons\virus.png' %}" alt="virus"></a>
    <div class=top-button-holder2>
        <button onclick="showtime2()" class=cmonbut ><span class=spanito3>today</span><span class=spanito2>&#9660;</span></button>
        </div>
    <ul id=big-title-list>
        {% for title in titles2 %}
        <li class=gundem>
            <a href="/today/popular/{{title.url}}--{{title.title_id}}">{{title.title}}---{{title.rating}}</a>
            {% if title.followed_count >= 0 %}
            <div class=title-amount><span class=left-sp>{{title.followed_count}}</span> / <span
                class=right-sp>{{title.amount}}</span></div>   
            {% else %}
            <div class=title-amount>{{title.amount}}</div>   
            {% endif %}
                
            
        </li>

        {% endfor %}
    </ul>
</aside>