个人中心
gpt4 book ai didi

html - div中不显示垂直滚动条

转载 作者：太空宇宙 更新时间：2023-11-04 01:44:57 24 4
gpt4 key购买 nike

我正在尝试创建如下所示的布局: enter image description here

导航和内容面板应该有独立的垂直滚动条。

我设法让它的大部分工作。但是“nav”div 没有显示滚动条，即使 overflow 设置为 scroll。

如何让垂直滚动条显示出来？如果可能的话，我想在不使用 JS 插件的情况下完成这项工作

body {
    height:95%; 
    width:95%
}

#header {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 80px; 
    right: 0px;
    overflow:hidden; 
    margin: 10px; 
    border-bottom: 1px solid black
}

#footer {
    position: absolute; 
    bottom: 0px; 
    height: 80px; 
    left: 0px; 
    right: 0px; 
    overflow: hidden; 
    margin: 10px; 
    border-top: 1px solid black
}

#content {
    position: absolute; 
    top: 90px; 
    bottom: 90px; 
    left: 160px; 
    right: 0px; 
    overflow-y: scroll;    
}

#nav {
    position: absolute;
    top: 90px; 
    bottom: 90px; 
    left: 0px; 
    right: 0px; 
    overflow-y: scroll
}
<body>

    <div id="header"> 
        <p>HEADER</P>
    </div> 

    <div id="nav" style="">
        <ul>
        <li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li>
        </ul>        
    </div>

    <div id="content" style=""> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in convallis turpis, pellentesque faucibus odio. Aliquam sem neque, posuere vitae suscipit ut, tincidunt congue arcu. Suspendisse blandit sodales enim, nec eleifend nisl cursus nec. Phasellus interdum ante nunc, in porta arcu bibendum id. In hac habitasse platea dictumst. Maecenas a congue nisi, a pellentesque mi. Mauris imperdiet orci vitae enim fringilla, at feugiat diam vehicula. Ut volutpat, leo vitae congue sagittis, justo mi fermentum lacus, et finibus arcu ligula at lacus. Nunc a scelerisque tortor, at congue ante. Ut vel nibh ultrices, tempus purus auctor, hendrerit dolor. Pellentesque tempus, lacus vitae hendrerit consectetur, nulla diam venenatis quam, porta gravida leo nulla eget justo.</p>

        <p>Sed finibus iaculis sem, nec suscipit nunc. Suspendisse pellentesque est tellus, ut consequat magna dictum ut. Sed orci enim, ultrices bibendum justo vitae, tristique fringilla orci. Nullam semper arcu quam, ut facilisis massa semper ut. Donec dictum porttitor erat et molestie. Proin ac justo dapibus, luctus velit vestibulum, eleifend tellus. Morbi ac molestie est, ut pellentesque nibh. Nunc at venenatis velit. Nullam scelerisque laoreet magna volutpat pellentesque. Donec a tincidunt metus, a mollis neque. Etiam urna mauris, dapibus sed felis et, consequat ultrices ligula. Nullam vitae bibendum lacus, eu condimentum sapien. Nunc sollicitudin sit amet eros at cursus. Duis gravida eros turpis, eu venenatis nibh vulputate vel.</p>

        <p>Nulla augue nisi, iaculis non massa at, varius lacinia nibh. Suspendisse congue arcu leo, a placerat nisl rhoncus eu. Quisque augue ipsum, accumsan a nulla et, sodales porttitor eros. Integer nec cursus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tempus magna urna, eget egestas purus hendrerit eu. Fusce in velit euismod, sodales libero feugiat, auctor mauris. In hac habitasse platea dictumst. Donec ornare commodo massa. Integer ut urna arcu. Cras maximus, mi in tristique auctor, lorem ipsum semper mauris, nec tincidunt nisl turpis et justo. Donec vitae purus aliquet ex porta vestibulum at nec magna. Pellentesque varius vehicula ante vitae dictum. Sed quis justo eget tellus commodo porta a in felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

        <p>Integer vestibulum mollis magna, id tincidunt diam condimentum vel. Cras lacinia quam vel tincidunt dictum. Donec interdum nec magna vel pharetra. Suspendisse et tempor neque, et rutrum velit. Ut ligula lacus, commodo ut mollis quis, auctor faucibus magna. Morbi feugiat hendrerit libero id elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pulvinar sapien ac finibus condimentum. Etiam rutrum auctor elementum. Sed hendrerit, neque eget vehicula dignissim, justo dolor blandit ipsum, eget gravida purus erat vitae nisi. Phasellus in tellus tincidunt, interdum diam id, dictum mauris.</p>

        <p>Fusce mattis convallis suscipit. Nam aliquam risus tincidunt arcu aliquam efficitur. Nulla euismod sed ligula quis bibendum. Sed felis dolor, dignissim ac aliquam vitae, maximus eget augue. Proin eu ligula vitae nisi accumsan convallis eget eu erat. Vivamus laoreet arcu dignissim pulvinar dapibus. Vivamus laoreet lorem nec faucibus molestie. Phasellus sit amet bibendum ligula. Pellentesque at augue felis. Nulla luctus dapibus dui eu maximus. Proin sapien quam, scelerisque id egestas vel, efficitur id arcu. Vestibulum pellentesque lectus in rhoncus egestas. Ut a pellentesque arcu, vel ultrices augue. Praesent viverra urna laoreet sem lobortis dapibus. Aliquam mauris odio, maximus vel risus imperdiet, consequat accumsan odio.</p>

        <p>Aenean gravida metus eu orci egestas, vitae venenatis ligula faucibus. Fusce eget eros vitae nibh porta pretium. Sed nulla quam, commodo id interdum nec, blandit sed ligula. Duis sed ante eleifend velit tempus porttitor vel sit amet diam. Donec tempus sollicitudin urna quis interdum. Nunc mattis in elit sed volutpat. Maecenas laoreet elit a metus fringilla molestie. Etiam vel rhoncus risus.</p>

        <p>Fusce nec dignissim dolor. Aenean venenatis enim a condimentum venenatis. Duis viverra, risus quis auctor venenatis, velit dui mollis mauris, quis fermentum mauris leo eu nunc. Aenean ultrices justo ac metus pretium laoreet. Aliquam mattis nisi arcu, at pretium magna tempus id. Donec elementum turpis eget ligula semper faucibus. Cras erat felis, ornare vitae convallis eu, faucibus in erat. Aliquam porttitor rutrum massa, quis consectetur nulla aliquet eu. Duis ut diam eu nulla finibus vehicula eget ac augue. Ut urna ante, varius a metus ut, sollicitudin eleifend sapien. Morbi facilisis pretium sem. Suspendisse dapibus augue leo, nec dignissim lacus lacinia et.</p>

        <p>Etiam laoreet in tortor a rhoncus. Pellentesque eget maximus lectus. Etiam tristique arcu a leo commodo rhoncus. Aliquam non sem a quam consectetur ultricies id non felis. Vestibulum commodo, risus in lacinia dictum, diam libero tincidunt magna, ac viverra elit velit eget orci. Nullam dolor risus, blandit eget nunc non, ultrices consequat tortor. Sed in odio tincidunt, mollis urna sit amet, condimentum enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla consectetur dignissim odio id imperdiet. Maecenas semper pellentesque dignissim. Cras urna tellus, auctor vel tincidunt non, eleifend in diam. In rhoncus nisi dolor. Donec sed posuere enim, nec dapibus orci. Nullam metus lectus, interdum eget mollis a, fringilla non quam. Fusce sollicitudin neque vitae commodo sodales. Suspendisse potenti.</p>

        <p>Sed sed turpis sagittis, varius nunc quis, elementum nibh. Etiam eget scelerisque ex, sit amet hendrerit nulla. Nam eleifend pharetra ipsum, id pretium nibh imperdiet quis. In hac habitasse platea dictumst. Ut mattis, turpis sed auctor efficitur, metus eros scelerisque tortor, eget rhoncus erat urna ut tellus. Integer id nisi sapien. Phasellus non rutrum nunc, nec molestie nisl. Suspendisse quis enim blandit, efficitur urna pellentesque, vehicula nulla. Aenean rhoncus sem non elit tristique vestibulum eget ac erat. Nunc vestibulum odio libero. Donec sit amet iaculis lacus. Duis vel sodales enim. Sed et ultrices dolor, sit amet vehicula magna.</p>

        <p>Pellentesque sem turpis, mollis vitae ligula a, venenatis tristique augue. In hac habitasse platea dictumst. Morbi et felis vel turpis efficitur fermentum eu in libero. Mauris bibendum ligula sapien, non eleifend nisl interdum ac. Duis pharetra lorem nibh, vitae aliquam neque bibendum a. Ut eu scelerisque erat, et dignissim metus. Vivamus egestas fermentum magna at commodo. In sodales velit in ante suscipit consequat. Vivamus porttitor nisl at lectus vestibulum, et porta dui volutpat. Phasellus sit amet dui quis diam auctor maximus et ac massa. Integer tempor eu mauris non facilisis. Donec et rhoncus ligula, vitae interdum purus. Nulla vel tellus ex.</p>

        <p>Cras magna orci, imperdiet at euismod eu, ullamcorper id tortor. Vivamus eget elit elementum, porta mi quis, mollis sem. In ac risus id nunc eleifend tincidunt a commodo mi. In quis dictum purus. Quisque molestie aliquam ex, quis feugiat mi porta ut. Suspendisse feugiat condimentum quam, ac dapibus velit convallis sed. Donec sed enim cursus, tincidunt mauris nec, dictum dui. Nulla vel diam dictum, ultricies ligula eget, porta mauris. Nullam ante metus, sagittis at mauris eu, mattis blandit dolor. Vivamus bibendum auctor orci. Pellentesque pellentesque tincidunt dui ut rutrum.</p>

        <p>Donec consequat lacus eget imperdiet euismod. Suspendisse in ligula nisi. Nulla facilisi. Nam lacus nulla, tempus sit amet cursus convallis, malesuada eu felis. Curabitur non urna justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt est ut urna accumsan auctor. Aliquam pretium rutrum diam, ut interdum libero. In eget tempus ligula. Etiam risus dui, sollicitudin id ipsum eget, iaculis tempus libero. Aenean commodo euismod felis eu faucibus. Nulla facilisis at metus sed malesuada. Duis gravida consequat accumsan. Cras mollis purus in nunc pharetra lacinia. Nunc varius nisl a enim egestas, in facilisis enim tincidunt.</p>        
    </div> 

    <div id="footer"> 
        <p>FOOTER</P>    
    </div>

</body>

最佳答案

您的#nav 元素太宽了。滚动条被隐藏；

#nav {
    width:160px;
}

关于html - div中不显示垂直滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44743302/

24 4 0
文章推荐： 复制文件并向后写入文件信息
文章推荐： python - 设置 random.seed() 以重新创建模拟行为和选择种子的影响
文章推荐： c - 如何迭代指向void的指针数组
文章推荐： css - 如何恢复宽度 :100% to just the length of the text?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com