嗨我有这样的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;
但是没有为我工作,并且滚动条显示即使内容小于视口的页。
谢谢你的帮助
你可以用div滚动div
overflow: auto|scroll|hidden;
当容器元素具有特定高度时。如果没有像你的例子那样给出高度它将无法工作。
在评论中你说你试过max-height:100%因为我建议你这样做,但为什么%不工作?因为%是指一个相对容器,其高度是否给定,基于它是否有效。 (如果我错了,请纠正我)
所以解决方案是(在你的情况下)使用vh。
#toc{
overflow: auto;
max-height: 100vh;
}
“vh”有效,因为它指的是显示器的当前视图高度。当然你也可以使用px。