解决方案

Question

嗨，我有一个像这样的div：

<div id="toc">
  <div>
    <h1 id="rs-doc-sql-compliance" class="header-toc">
      <a href="#rs-doc-sql-compliance"><span>SQL compliance</span></a>
      <ul>
        <li>
          <h2 id="rs-doc-select-statements" class="header-toc">
            <a href="#rs-doc-select-statements"
              ><span>SELECT Statements</span></a
            >
            <ul>
              <li>
                <h3 id="rs-doc-select-syntax" class="header-toc">
                  <a href="#rs-doc-select-syntax"><span>SELECT Syntax</span></a>
                </h3>
              </li>
            </ul>
            <ul>
              <li>
                <h3 id="rs-doc-examples" class="header-toc">
                  <a href="#rs-doc-examples"><span>Examples</span></a>
                </h3>
              </li>
            </ul>
            <ul>
              <li>
                <h3 id="rs-doc-aggregate-functions" class="header-toc">
                  <a href="#rs-doc-aggregate-functions"
                    ><span>Aggregate Functions</span></a
                  >
                  <ul>
                    <li>
                      <h4 id="rs-doc-count" class="header-toc">
                        <a href="#rs-doc-count"><span>COUNT</span></a>
                      </h4>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <h4 id="rs-doc-count_distinct" class="header-toc">
                        <a href="#rs-doc-count_distinct"
                          ><span>COUNT_DISTINCT</span></a
                        >
                      </h4>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <h4 id="rs-doc-avg" class="header-toc">
                        <a href="#rs-doc-avg"><span>AVG</span></a>
                      </h4>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <h4 id="rs-doc-sum" class="header-toc">
                        <a href="#rs-doc-sum"><span>SUM</span></a>
                      </h4>
                    </li>
                  </ul>
                </h3>
              </li>
            </ul>
            <ul>
              <li>
                <h3 id="rs-doc-join-queries" class="header-toc">
                  <a href="#rs-doc-join-queries"><span>JOIN Queries</span></a>
                  <ul>
                    <li>
                      <h4 id="rs-doc-inner-join" class="header-toc">
                        <a href="#rs-doc-inner-join"><span>Inner Join</span></a>
                      </h4>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <h4 id="rs-doc-left-join" class="header-toc">
                        <a href="#rs-doc-left-join"><span>Left Join</span></a>
                      </h4>
                    </li>
                  </ul>
                </h3>
              </li>
            </ul>
          </h2>
        </li>
      </ul>
    </h1>
  </div>
</div>

这里是我正在使用的CSS：

#tocOut{
  position:sticky;
  padding-top:8px;
  margin-top: 8px;
  padding-left: 8px;
  top:8px;
}

如果内容超出页面视口，我想使此 div 滚动，这是一个示例：

在此屏幕截图中，内容远远超出了页面的高度，但我无法使其滚动，我尝试过overflow-y: scroll;但对我而言却没有用，即使内容出现，滚动条也会显示小于页面的视口。

感谢您的帮助

Answer 1

您可以使div可滚动

overflow: auto|scroll|hidden;

当容器元素具有特定高度时。如果没有像您的示例中那样给出高度，它将不起作用。

在评论中，您说您尝试过使用max-height：100％，因为我建议您这样做，但是为什么％不起作用？因为％是指相对容器，在该容器中是否给出高度，基于此容器是否起作用。（如果我错了，请纠正我）

解决方案

因此（根据您的情况）解决方案可以使用 vh 。

#toc{
 overflow: auto;
 max-height: 100vh;
}

“ vh”之所以有效，是因为它指的是显示器的当前视图高度。当然您也可以使用px。

如果内容超出视口的高度，则使div可滚动

1 个答案:

解决方案