Question

我做了一个小笔记 - 应用程序，用户可以在其中添加和编辑笔记。这个notes-app位于侧边栏内，可以切换（twitter bootstrap）。

问题在于，如果用户添加的注释多于侧面高度可以显示的注释，则侧面不会通过使其可滚动而延伸。它们只显示在页面的可见区域之外。

我已经使用硬编码组件对其进行了测试，并通过使其可滚动来扩展侧面高度。这就像Vue生成的组件无法识别。

HTML

<aside class="control-sidebar control-sidebar-dark" id="notes_sidebar">
                <div class="tab-content">

                    <div class="col-md-3">
                        <h2 class="control-sidebar-heading">
                            Your Notes
                        </h2>

                        <ul class="control-sidebar-menu">

                            <li>
                                <a @click="addNote()">
                                    <i class="menu-icon fa fa-plus bg-green"></i>
                                    <div class="menu-info">
                                        <h4 class="control-sidebar-subheading">New Note</h4>
                                    </div>
                                </a>
                            </li>

                            <li v-for="note in notes" transition="fade">
                                <a @click="setActive($index)">
                                    <i class="menu-icon fa fa-sticky-note-o bg-yellow"></i>
                                    <div class="menu-info">
                                        <h4 class="control-sidebar-subheading">{?{ note.name }?}</h4>
                                        <p>{?{ note.date }?} <span class="fa fa-minus-circle fa-2x pull-right text-red" @click="deleteNote($index)"></span></p>
                                    </div>
                                </a>
                            </li>

                        </ul>

                    </div>
...

有谁知道为什么会发生这种情况以及如何使vue生成的组件溢出-y可滚动？

Answer 1

您可以检查是否有任何容器有高度限制。我有一个类似的问题，然后发现我在父容器上有'max-height'。

Vue JS v-for生成的组件没有扩展站点高度（overflow-y）

1 个答案: