我有一个侧边栏,其中包含一些我必须使用的预定义类。我无法制作其他 div。我必须使用那些。问题是我有一个搜索输入和一个目录。
预期结果:目录应该是可滚动的。搜索下拉菜单不应被右侧的 div(主要内容)剪切。
这是两者的父 div。请不要说使用 2 个不同的 div。我不能这样做。我暂时受制于主题。
.wy-nav-side {
width: 40rem;
overflow-x: visible;
overflow-y: scroll;
height: 95%;
}
实际结果:搜索下拉菜单被切断,但滚动工作正常。以下是一些可用于 TOC 和搜索的附加类,但它们不起作用:
.wy-menu-vertical {
margin-left: 2rem;
width: 100%;
height: 95%;
overflow-y: scroll;
}
.wy-side-scroll {
width: 35rem;
background-color: #fff;
height: 95%;
overflow: visible!important;
}
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search">
<a href="../index.html" class="icon icon-home">
<img src="../_static/image.png" class="logo" alt="Logo">
</a>
<div class="version">
2.3
</div>
<div id="searchbox" role="search">
<div class="form-group form-group-lg row pl-3">
<span class="algolia-autocomplete algolia-autocomplete-left" style="position: relative; display: inline-block; direction: ltr;"><input type="text" class="form-control w-100 ds-input" name="q" autocomplete="off" placeholder="Search the Docs" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Lato, proxima-nova, "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;">kub</pre><span class="ds-dropdown-menu ds-with-1" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; left: 0px; right: auto; display: none;"><div class="ds-dataset-1"></div></span></span>
</div>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<p class="caption"><span class="caption-text">Contents</span></p>
<ul class="current">
<li>Lots of li's here</li>
</ul>
</div>
</div>
</nav>