CSS用于提供可滚动的div，占用100%可用高度，但不会在正文中添加滚动条
CSS中可以使用overflow: auto属性来实现可滚动的div，并且不会在正文中添加滚动条。具体的解释如下：
CSS中的overflow属性用于控制元素内容溢出时的处理方式。当设置为auto时，如果元素内容超出了容器的尺寸，浏览器会自动添加滚动条以便用户可以滚动查看内容。
为了让div占用100%可用高度，可以设置其父元素的高度为100%。这样，div的高度就会自动填充父元素的高度。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
}
.scrollable-div {
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="scrollable-div">
<!-- 这里放置需要滚动的内容 -->
</div>
</div>
</body>
</html>在上面的示例中，我们设置了html和body元素的高度为100%，并且去除了默认的边距和内边距。然后，我们创建了一个容器元素.container，并将其高度设置为100%。在容器内部，我们创建了一个可滚动的div元素.scrollable-div，并将其高度也设置为100%。这样，div就会占用整个可用高度，并且当内容超出div的尺寸时，会自动添加滚动条。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我正在尝试让一个没有任何JS的布局工作，只有HTML和CSS。top-div
left-div center-div right-div 这个想法是在中间的div上有垂直滚动条，而不是页面上的其他地方，包括正文。它看起来最好的想法是一个垂直的flexbox，使顶行和底行，然后是一个水平的flexbox，使左，中，右。 这能有多难呢？好吧，如果你
浏览 41提问于2019-12-15得票数 0
回答已采纳
我见过的应用程序占用了浏览器窗口的所有可用空间，但浏览器窗口上没有任何滚动条，而是特定div的滚动条(例如，jsfiddle，它将滚动条用于html、css、javascript和results div，但不使用浏览器窗口滚动条)。我试图为我的应用程序开发这样的布局，我已经尝试了一些关键字，如应用程序样式UI，
浏览 0提问于2013-02-03得票数 1
回答已采纳
1回答
我正在尝试让滚动条在默认情况下被隐藏，使用不透明度，然后当用户滚动页面或悬停滚动条时，滚动条会淡入(由css转换处理)。然后，当用户停止滚动时，滚动条在1秒后再次淡出。代码是：{ -webkit-transition: opacity .3s ease-in-out如果我在web检查器中查看，将应用样式，但滚动条
浏览 0提问于2014-07-14得票数 0
我在页面的左侧有一个用于导航链接的div。单击标题可展开链接的子集。我将这个div设置为页面高度的100%，这样列就占据了整个页面的左侧。当所有的子类别都展开时，就会出现问题。div的内容位于页面的底部，但没有添加滚动条。
我试着将高度设置为auto，看看是否可以解决这个问题(忽略了它不会占据整个左侧的事实)，但这也没有解决它。
浏览 0提问于2011-07-14得票数 8
回答已采纳
我正在为我的新项目( )使用这个引导程序模板，我对设计指标非常满意，我面临的唯一一个小问题是导航栏是静态顶部的，它与滚动条重叠。我尝试将导航栏更改为固定顶部，但它仍然与scrollbar.After重叠许多故障排除，我发现.column类有溢出:auto，这是导致问题的原因。当我决定使用overflow:hidden / scroll / inherit时，结果并不是我所期望的。
有人能帮上忙吗？
浏览 0提问于2014-03-21得票数 0
我在下面添加了一张图片，更详细地说明了我的网页模型。我希望能够将垫卡的大小修正为页面的高度减去页眉的高度，这样垫卡就能填充页面上所有剩余的垂直空间。是否有一种方法可
浏览 4提问于2020-02-07得票数 0
回答已采纳
有一个奇怪的问题(奇怪，因为我不明白)这不起作用-可滚动区域比可见区域更大，从而导致滚动条的下部低于可见区域。看起来滚动区域是用列表区域的高度来扩展的。
这个问题只适用于100%的高度(让测试以不同的方
浏览 3提问于2012-08-09得票数 2
$(window).scroll(function(){})
我见过一个插件就能做到这一点，但我希望能够理解逻辑是如何工作的。有没有人能给我解释一下，或者至少给我指出一个可以进一步解释的网站？
浏览 1提问于2017-06-08得票数 1
我正在尝试构建一个允许灵活的高度页眉和页脚的布局，中间有一个部分占用剩余的空间。中间的任何溢出都应该为这个中间部分提供一个滚动条。<!html> <style> margin: 0; heigh
浏览 7提问于2012-09-26得票数 6
回答已采纳
2回答
具有flex-direction: row的flex占用所有垂直空间，并防止子元素中的滚动条。
现在，我想在主要内容中添加一个侧边
浏览 5提问于2018-01-10得票数 2
回答已采纳
2回答
需要帮助，为什么我的滚动顶没有在这个上工作--我不知道why..using --代码一切都很好。但是更新css --滚动顶部不起作用。：(我应该做些什么来修复这个问题呢？问题是由我的css风格引起的吗？我用过这个，但它不会在div底部滚动。
浏览 2提问于2013-10-19得票数 0
回答已采纳
我正在尝试使用柔性盒，让固定高度容器( two )固定在页面底部，然后让另一个容器占用可用的空间( flexbox )。这并没有给我想要的效果，所以我不知道我错过了什么
<div class="two"
浏览 2提问于2021-09-09得票数 0
回答已采纳
4回答
我有一个可滚动的div，当我不滚动的时候，这个div(在我的Mac浏览器上)隐藏了滚动条。然而，在windows 8上，它在Chrome和Firefox中不起作用。Ie也不支持这一点，但我使用以下CSS启用了它：有什么方法可以让Chrome和Firefox实现这种行为吗
浏览 3提问于2014-07-23得票数 10
回答已采纳
4回答
我在body中有一个带有body的元素，从左侧到左边有一部分。
overflow: visible; position: absolute; width: 100px; background-color: lime;<div id="test"></div>我预计水平滚动条应该允许将文档滚动到
浏览 19提问于2016-12-23得票数 10
1回答
我有一个隐藏的div元素，当一个按钮被点击时会出现。(联机图书).booking-inner-popup { height: 90vh;这在浏览器和Android上都很好(因为它为超出视图的内容提供滚动条)，但它不
浏览 0提问于2018-10-24得票数 1
我想用HTML5 / CSS3做以下事情(完全兼容浏览器会很好，但不是完全必要的-到目前为止，我正在用Firefox4b12，safari和chrome进行测试)：<div id侧边设置为100%高度(使用内容包装器的所有空间！)
child1的内容是可变的(可能会被用户交互的CSS或DOM操作所改变)，所以它的高度被设置
浏览 1提问于2011-03-07得票数 0
使用以下代码，我可以在jupyter笔记本或转换后的HTML中使用代码显示漂亮的并排集中式表格 import pandas as pdfrom IPython.display然而，如果我在没有使用jupyter nbconvert --to html --no-inp myfile.ipynb代码的情况下将myfile.ipynb转换为myfile.html，表格显示几乎没有水平空间和长滚动条，这使得它们相当不可用。 我可以做些什么来保持表格在jupyter笔记本
浏览 62提问于2020-07-18得票数 2
我还提供了，它准确地显示了粉红色div是如何扩展得太远的，并且没有像预期的那样覆盖屏幕。
该页面为标题和面包屑的合并高度创建滚动
浏览 1提问于2018-04-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
