开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

scrollWidth,clientWidth,offsetWidth的区别

网页可见区域宽：document.body.clientWidth; 网页可见区域高：document.body.clientHeight; 网页可见区域高：document.body.offsetWeight: 网页可见区域高：document.body.offsetHeight; 网页正文全文宽：document.body.scrollWidth; 网页正文全文高：document.body.scrollHeight; 网页被卷去的高：document.body.scrollTop; 网页被卷去的左：document.body.scrollLeft; 网页正文部分上：window.screenTop; 网页正文部分左：window.screenLeft; 屏幕分辨率的高：window.screen.height; 屏幕分辨率的宽：window.screen.width; 屏幕可用工作区高度：window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth;

02

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

在浏览器中实现用户界面时，请尽可能减少浏览器带来的差异，以使用户界面具有可预测性。跟踪所有这些差异很困难，因此，我整理了一些常见问题及其解决方案方便大家查看。

01

「译」前端项目中常见的 CSS 问题

快速摘要：近年来，跨浏览器的渲染和交互已经愈加一致。不过，它仍然没有达到完全一致，有很多小问题会让你出错。除了这些问题之外，还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定因素，我们从中发现了许多会让开发者出错的小问题。

01

CSS 中你需要知道 auto 的一切！

在CSS中，我们有auto值，它可以用于像margin，position，height，width等属性。在本文中，会先解释auto的工作方式以及如何最大程度地利用auto的技术细节,当然，会配合一些用例和示例。

03

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。在其他情况下，UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下，您可能有充分的理由来定制滚动条。例如，您可以定制滚动条样式以匹配网站的外观和感觉。

00

动手练一练，手写一个价格对比、固定表头滚动的表格

大家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。虽然有不少相关插件提供了类似的功能，比如 ScrollMagic.js，但是今天的实例，我们将用纯原生的方式进行实现，当滚动条滚动至表格位置，固定表头位置，表格内容查看完后，取消固定表头的功能。

03

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊

02

浏览器中的几个高度

载入首批数据，文档高度（ $('html').height() == 2500px ）

02

学前端到了CSS阶段，你一定要掌握这9大防御式开发技能

防御性编程是一种细致、谨慎的编程方法（习惯）。我们在写代码时常会有“以防万一”的心态，把以防万一有可能出现的情况提前考虑进去，规避以免以防万一出现带来的问题。

00

《从案例中学习JavaScript》之实现网页版阅读器

序现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。再久远一些，小的时候，我也经常和小伙伴们组团去书店看白书，也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书，在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。岁月在流逝，时代在进步。愿放下所有的浮躁，在新的时代愉快地生活，无所谓明天怎

06

CSS深入理解学习笔记之overflow

1、Overflow基本属性　　overflow:visible(默认)/hidden/scroll/auto/inherit; 　　visible：超出部分可见。　　hidden：超出部分隐藏。　　scroll：超出可滚动。　　auto：若超出才出现滚动条。　　inherit：继承。（IE8+）　　注：overflow-x与overflow-y值不同，其中一个属性值被赋予visible，而另一个被赋值为hidden/scroll/auto，则visible会被重置为auto。兼容性：

05

防御式CSS是什么？这几点属性重点防御！

很多时候，我们希望有一种方法可以避免某种CSS问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。

03

CSS 中关于 Overflow ，你需要了解的这些知识点！

在CSS中，当一个元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。

02

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane 和 mCustomScrollbar。

03

使用CSS这个小技巧，可以让长列表网页的渲染性能提升几倍以上！

长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。

03

只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！

长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。

01

只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！

长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。

02

vue操作dom元素的三种方法

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到

02

每个前端开发需要了解的10个强大的CSS属性

快来免费体验ChatGpt plus版本的，我们出的钱体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

02

滚动条三要素scrollTop clientHeight scrollHeight

插件 https://github.com/inuyaksa/jquery.nicescroll

04

详解DOM对象中clientWidth、offsetWidth等属性

我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。

02

蒙层禁止页面滚动的方案

弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题，文中介绍了一些常用的解决方案。

02

何为 content-visibility？

最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。

01

CSS vw让overflow:auto页面滚动条出现时不跳动

当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~

02

对html与body的一些研究与理解

最近一直构思着写篇关于<html>标签的文章，虽说之前处理过<html>标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。

03

【前端攻略--HTML/CSS】html 文档流的理解

理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，经过我看过的一些文章，加入自己的理解。我得出文档流的定义如下：

02

如何把控css的方向感

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。

01

css必知的几个底层知识和技巧

问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。

02

[译]这几个CSS小技巧，你知道吗？

在网页设计和前端开发中，CSS属性是非常重要的一部分。掌握常用的CSS属性不仅可以使你的网页看起来更美观，还能提升用户体验，今天小编为大家介绍8个常见的CSS小技巧：

02

前端课程——显示与隐藏

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

03

IT课程 CSS基础 022_文本、字体、链接

用于设置文本的首行缩进，适用于段落首行缩进的场景，避免在行内元素上使用。属性可以接受绝对值或相对值，绝对值单位包括像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 等，相对值单位包括 em、rem、vw、vh 等。

01

offsetWidth,clientWidth的区别

包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度

02

table固定表头，tbody滚动条样式设置以及填的几个坑

有的建议使用：position: absolute 或者 position: fixed;

02

JS - 兼容到ie7的自定义样式的滚动条封装

demo： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author"

04

答题卡生成与打印

OpenCV可以用来生成，但是文字换行等场景就比较难实现，这里使用HTML生成答题卡。

02

JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

全文参考：https://github.com/iuap-design/blog/issues/38 、MDN

01

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

固定定位是固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;

02

JS实现无限分页加载——原理图解

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。有很多网站使用无限分页的模式，即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型，讲述其中奥妙。原理图实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。因此，可能会出现两种情况： 1 当页面的内容很

React技巧之使用ref获取元素宽度

原文链接：https://bobbyhadz.com/blog/react-get-element-width-ref[1]

01

随心所欲的滚动条，远离产品汪（一）

在我们的开发生活中，相信很多人都会遇到形形色色的项目需求，比如更改浏览器的默认样式，在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式，或者当你想构建一个很有特色和创意的网页，那么也肯

05

uniapp中scroll-view局部滚动的各种场景

可滚动视图区域，用于区域滚动。使用竖向滚动时，需要给 scroll-view 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给 scroll-view 添加 white-space: nowrap; 样式。

03

Element scrollbar 使用封装

最近进行 Element UI 组件封装，在之前的项目中经常用到 el-scrollbar 这个内置组件，这次单独封装时遇到点写法上的小问题，做个记录和分享，希望能帮到相关的开发者。

01

一个可能让你的页面渲染速度提升数倍的CSS属性

浏览器在接收到服务端返回的 HTML 之后，需要把这段数据渲染成用户看到的页面，在开始渲染第一个元素之前可能还需要经过很多步骤。这个过程会适用于整个页面，包括当前不可见的内容。

02

Amazing！巧用 CSS 视差实现酷炫交互动效

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。

04

javascript图片无限懒加载

知识点：for循环语句，DOM概念，元素获取，动态布局，基本算法，节点操作，JQ与JS的关系与区别，JS的重要性，如何学习JS。 html代码：

03

这实现牛逼了，原来阮大佬博客的阅读进度功能这么简单

小包在学习阮一峰大佬的《ES6入门教程》时，对文章顶部的阅读进度功能产生了浓厚的兴趣。小包当时猜想应该是使用 JavaScript 实现的，但最近爱上了浩如烟海的 CSS ，于是小包有个大胆的想法，单纯的 CSS 能实现阅读进度功能吗？

03

html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…

浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight

02

html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记…[通俗易懂]

全文参考：https://github.com/iuap-design/blog/issues/38 、MDN

02

用canvas画了个table，手写滚动条

在之前业务有幸接触过复杂的大数据业务渲染，所用的table居然是用canvas以及虚拟列表的方式实现，也有看到飞书的统计信息表就是canvas绘制，一直没太明白为什么要用canvas去做，今天记录一下如何用canvas绘制一个table的简易版，希望看完在项目中能带来一些思考和帮助。

02

实现滚动时Header自动隐藏

这是掘金网页版的头部，当滚动条向下滑动时，主header会隐藏，次级header会吸在页面顶部。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭