使div可滚动的内容超出视口的高度

问题描述 投票:0回答:1

嗨我有这样的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可滚动这里是一个例子:

Screenshot

在这个截图中,内容超过了页面的高度,但是我无法使其可滚动,我已经尝试过overflow-y: scroll;但是没有为我工作,并且滚动条显示即使内容小于视口的页。

谢谢你的帮助

html css
1个回答
1
投票

你可以用div滚动div

overflow: auto|scroll|hidden; 

当容器元素具有特定高度时。如果没有像你的例子那样给出高度它将无法工作。

在评论中你说你试过max-height:100%因为我建议你这样做,但为什么%不工作?因为%是指一个相对容器,其高度是否给定,基于它是否有效。 (如果我错了,请纠正我)

Solution

所以解决方案是(在你的情况下)使用vh。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.