程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了具有固定位置的div,如果内容溢出,则需要滚动大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决具有固定位置的div,如果内容溢出,则需要滚动?

开发过程中遇到具有固定位置的div,如果内容溢出,则需要滚动的问题如何解决?下面主要结合日常开发的经验,给出你关于具有固定位置的div,如果内容溢出,则需要滚动的解决方法建议,希望对你解决具有固定位置的div,如果内容溢出,则需要滚动有所启发或帮助;

使用的问题height:100%它将占页面的100%,而不是窗口的100%(您可能会希望如此)。这将引起您所看到的问题,因为非固定内容足够长,可以包含高度为100%的固定内容,而无需滚动条。浏览器不知道/不在乎您实际上无法向下滚动该栏以查看它

您可以fixed用来完成您想做的事情。

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hIDden;
}

解决方法

我实际上有两个问题,但是让我先解决主要问题,因为我认为另一个更容易解决。

我在菜单左侧的滚动条的左侧有一个固定位置的div。右侧是可以正确滚动的标准div。问题是,当浏览器的视口太小而看不到整个菜单时,..没有办法让它滚动到我能找到的位置(至少没有使用CSS)。我试过在CSS中使用不同的溢出,但是没有什么可以使div滚动。包含菜单的div设置为min-
height:100%和position:fixed ..这两个属性我都需要保留。

包含 @H_262_24@菜单 的div 位于另一个包装div中,该div绝对定位并且高度设置为100%。

如果内容对于div而言太高,如何使其垂直滚动?

这导致我遇到另一个问题,即我不希望显示滚动条。.但是我想我可能已经对此有了一个答案(只是它还不起作用,因为我无法使div滚动首先)。

有什么办法吗?也许需要JavaScript?(我对此一无所知)

以及引起问题的相关代码(由于将整个内容发布在这里太长了):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

还尝试添加height:100%只是为了看看这是否是一个问题,但是它也不起作用&Hellip;也没有固定的高度,例如600px。

大佬总结

以上是大佬教程为你收集整理的具有固定位置的div,如果内容溢出,则需要滚动全部内容,希望文章能够帮你解决具有固定位置的div,如果内容溢出,则需要滚动所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。