如何实现当DIV里的内容超过DIV的高度，DIV会自动添加滚动条

最新推荐文章于 2024-04-10 09:24:58 发布
原创 最新推荐文章于 2024-04-10 09:24:58 发布 · 3.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#div

本文介绍了一种通过设置DIV的style属性为overflow:auto的方法来实现当内容超出DIV高度时自动添加滚动条的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 实现方法：

    div的style设置了overflow:auto后，当DIV里的内容超过DIV的高度，DIV会自动添加滚动条，拉动滚动条才能看到底

部的内容。

设置当内容超出div（文字长度超出div宽度或者长度）自动出现滚动条
weixin_51396911的博客
01-07 1729
内容必须在div中 div要设置宽高 overflow设置为auto overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。 overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条 overflow-y:auto;当内容宽度超出div高度，自动出现垂直滚动条 div{ height: 401px; overflow: a..
js代码，当div中内容高度超出div高度的时候实现定制滚动条！
u011061301的专栏
10-27 1851
//图片展示层中图片过长的时候显示滚动条效果 var isMouseDown = false; var scrollY = 0; var scrollObjInfo = new Array(); var mouseDownY = null; var scrollBarIndexHight = null; var scrollY = null; //scrollDivObj 固定高度的div对
Vue替代marquee标签超出宽度文字横向滚动效果
10-15
主要介绍了Vue替代marquee标签超出宽度文字横向滚动效果,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
列表数据固定在 div 中，并在数据超出 div 的长度时显示一个向下滚动条
最新发布
qq_53026617的博客
04-10 732
列表数据固定在 div 中，并在数据超出 div 的长度时显示一个向下滚动条，表格等也适用
div 无缝滚动（内容超过就滚动，不超过不滚动）
weixin_30354675的博客
04-26 671
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %> <style type="text/css"><!--#demo {background: #FFF;overflow:hidden;heig...
vue页面超出显示滚动条滑动展示
weixin_44167504的博客
05-10 6907
vue页面超出显示滚动条滑动展示 .analysis { width: 100%; height: calc(100%); overflow-y:scroll; overflow-x:hidden; }
给div加滚动条,当内容超过它的范围的时候
www.hohode.com
02-16 1286
overflow: scroll;
js固定DIV高度,超出部分自动添加滚动条的简单方法
10-27
通过以上步骤，我们成功地创建了一个固定高度的`<div>`，并且当内容超出这个高度时，滚动条会自动出现。这种方法适用于那些需要限制显示区域但又不希望丢失任何内容的场景，例如，基本信息展示、评论区或者数据列表...
css实现div自动添加滚动条(图片或文字等超出时显示)
01-21
原来用过，没有太在意，最近又用到。... 参数： 1.visible :不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 2.auto :此为b
限制div高度当内容多了溢出时显示滚动条
09-25
整体来说，通过上述的方法，可以实现当div中的内容超出了指定的高度范围时，用户可以通过滚动条来查看全部内容，而不影响页面的其他布局。这在设计网页时，特别是在做信息展示类的网页时，是一种非常实用的技术手段...
html中设置让div中的内容超出后自动显示滚动条
09-28
通过这种方式，当 "autoScroll" div 中的内容超出其设定的宽度或高度时，浏览器会自动显示滚动条，让用户能够查看和访问所有内容，而不会破坏整体布局。这种做法在处理大量数据或者有限空间展示内容时非常实用。 ...
CSS实现导航固定的、左右滑动的滚动条制作方法
11-20
如上效果的导航，导航是固定在顶部的，可以左右滑动点击更多选项的。 这种制作相当简单，本文只是提几点注意： 固定位置 菜单固定在顶部不动，使用 position:fixed; top:0; left:0;。同时要注意： 下面列表下移相应的位置，否则打开页面时，下方列表会被遮住一部分。 为菜单设置背景，否则透明的话，与下面列表滚动上来的内容会重叠显示。 为 body 设置背景，因为微信浏览器默认有个背景色（不是白色），可能会与我们的效果冲突，按需设置背景。 使用 table 通常我们使用 ul、li 作 float，但是当一行显示不下时，要让它不落到第二行的话，比较麻烦，所
vue项目 当超出一定的高度或者宽度时显示滚动条
m0_61096379的博客
07-29 5155
当超出高度或者宽度时显示滚动条.
vue解决内容数据超出屏幕高度时样式问题
weixin_38808271的博客
04-08 1493
vue 高度自适应时样式问题
vue 页面高度自适应 超出部分滚动条
weixin_47239395的博客
06-22 7933
可视区高：document.body.clientHeight 可视区高+边框线：document.body.offsetHeight html: <div :style="{ height: screenHeight + 'px' }" class='odiv'>最外层div</div> js部分:document.body.clientHeight - 110(这个数值根据自身页面预留来设置,我页面是头部菜单固定,下面div内容自适应) data:{ screenHeigh
内容超出div,设置滚动条
热门推荐
qq_46239275的博客
12-11 1万+
当内容超出div时,自动出现滚动条的条件: 1、内容必须在div中； 2、div要设置宽高； 3、overflow 设置 auto； 备注： 1、overflow:auto; 当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条； 2、overflow-x:auto; 当内容宽度超出div宽度，自动出现水平滚动条； 3、overflow-y:auto; 当内容宽度超出div高度，自动出现垂直滚动条； 注意： 设置好后会自动换行；
使DIV的高度固定，当超出固定高度时，出现自动滚动条
小学僧的学习笔记
03-23 7888
style="height: 10px; overflow-y: scroll;"
让DIV变成默认高度,如果内容过长自动加长问题
NOT NULL
11-13 2200
<div style="clear:both;"><!-- 设置自动高度，自动加长。如果设置了浮动，在未尾使用clear:both;即可，如些代码 --></div>
内容滚动条和子div高度自适应
OBKoro1前端分享
03-23 5739
内容滚动条和子div高度自适应 写在前面：老套路有图有真相，这才叫做分享。本文内容是：一个div里面，两个子div高度自适应（平分父div的高度）和元素内容过多的时候，根据需求出现高度滚动条或者宽度滚动条。 先放最终效果（在下面会有demo代码。）： Paste_Image.png 实现这些效果要怎么做呢？咱一步一步来。 第一步： 先设置html结构：这里我已经搭好了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值