0

我有一个侧边栏,其中包含一些我必须使用的预定义类。我无法制作其他 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, &quot;Helvetica Neue&quot;, 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>
4

0 回答 0