设计最大高度，当超出时出现滚动条，设置滚动条样式

最新推荐文章于 2023-05-11 16:20:09 发布
转载 最新推荐文章于 2023-05-11 16:20:09 发布 · 2.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/javenlee/p/7205607.html

本文介绍了一种使用CSS来定制滚动条样式的技巧，当元素高度超过400px时，滚动条会自动显示，并对其样式进行了美化，包括宽度、背景颜色及悬停状态的变化。

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



/*超过400px滚动条出现*/

max-height:400px;


overflow:auto;






/*修改滚动条样式*/
.myscroll_wrap::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar{width:7px;height:7px;}
.myscroll_wrap::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar-track{border-radius:5px;background:#ddd;}
.myscroll_wrap::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(153,153,153,.5);}
.myscroll_wrap::-webkit-scrollbar:hover,.pop .pop_content::-webkit-scrollbar-thumb:hover{background:rgba(102,102,102,.6);}
.myscroll_wrap::-webkit-scrollbar:active,.pop .pop_content::-webkit-scrollbar-thumb:active{background:rgba(102,102,102,.6);}




 




转载于:https://www.cnblogs.com/javenlee/p/7205607.html

                

        




    

    
  



    



                



	

		

			

				
					
CSS实现滚动条颜色样式设置及隐藏方法

				
			

			

				

					07-21
				

			

		

		

			
				
滚动条通常会在内容超出容器元素的宽度或高度时出现，方便用户查看超出可视区域的内容。在CSS中，overflow属性可以用来控制元素内容的溢出行为。例如： 要改变滚动条的颜色和样式，CSS提供了特定于滚动条的伪元素和...

			
		

	



                

            
              



	

		

			

				
					
html中设置让div中的内容超出后自动显示滚动条

				
			

			

				

					09-28
				

			

		

		

			
				
通过这种方式，当 "autoScroll" div 中的内容超出其设定的宽度或高度时，浏览器会自动显示滚动条，让用户能够查看和访问所有内容，而不会破坏整体布局。这种做法在处理大量数据或者有限空间展示内容时非常实用。  ...

			
		

	



              


  
              

                


	

		

			

				
					
ElementUI 表格表头筛选框的高度设置，超出一定高度，显示滚动条

				
			

			

				

					weixin_34372728的博客
				

				

					03-05
					
					1310
					
				

			

		

		

			
				
最近项目发现一个问题table表头筛选的时候，由于筛选内容过多导致弹出框超出屏幕，并且无法滚动，应急的办法是缩小浏览器显示比例让更多内容显示

			
		

	





	

		

			

				
					
CSS 设置超过一定高度后出现滚动条

					
热门推荐

				
			

			

				

					阿飞的博客
				

				

					12-14
					
					1万+
					
				

			

		

		

			
				
.test {
    max-height: 500px,
    overflow-y: auto
}




			
		

	



		

			
		



	

		

			

				
					
echarts，tooltip数据过多超过高度时显示滚动条

				
			

			

				

					ICanWin_lll的博客
				

				

					08-25
					
					3901
					
				

			

		

		

			
				
https://segmentfault.com/a/1190000023409115


			
		

	





	

		

			

				
					
el-scrollbar自适应高度，超出最大高度时出现滚动条

				
			

			

				

					weixin_42301445的博客
				

				

					05-11
					
					5144
					
				

			

		

		

			
				
使用elementUI的el-scrollbar时候遇见的问题，自适应高度，超出最大高度时出现滚动条，css样式加个这个就行了


 .el-scrollbar .el-scrollbar__wrap{
    padding-bottom: 13px;
    max-height: 600px;
  }

附源码截图：






...

			
		

	





	

		

			

				
					
学习记录 echarts tooltip超出限制 echarts显示滚动条

				
			

			

				

					qq_45778558的博客
				

				

					05-11
					
					1110
					
				

			

		

		

			
				
echarts显示滚动条 以及tooltip显示不完全解决方案

			
		

	





	

		

			

				
					
限制div高度当内容多了溢出时显示滚动条

				
			

			

				

					09-25
				

			

		

		

			
				
关于如何限制div的高度并在内容溢出时显示滚动条，这是一个在网页设计中非常实用的技巧。特别是在我们想要在一个有限的空间内显示尽可能多的内容，而又不想破坏页面的整体布局时，我们通常会采用这种技术。接下来，...

			
		

	





	

		

			

				
					
js固定DIV高度,超出部分自动添加滚动条的简单方法

				
			

			

				

					10-27
				

			

		

		

			
				
通过以上步骤，我们成功地创建了一个固定高度的`<div>`，并且当内容超出这个高度时，滚动条会自动出现。这种方法适用于那些需要限制显示区域但又不希望丢失任何内容的场景，例如，基本信息展示、评论区或者数据列表...

			
		

	





	

		

			

				
					
Element UI 滚动条组件scrollbar设置 max-height 的使用

				
			

			

				

					ZionHH的博客
				

				

					12-26
					
					7341
					
				

			

		

		

			
				
el-scrollbar 之设置 max-height 显示滚动条

很多博主写了父级固定高度的使用，这里写下 max-height 如何设置
<!-- 嵌套你需要滚动的地方 -->
<el-scrollbar></el-scrollbar>

.el-scrollbar {
	.el-scrollbar__wrap {
		max-height: 300px...

			
		

	





	

		

			

				
					
超过一定高度自动显示垂直滚动条

				
			

			

				

					hw1287789687的专栏
				

				

					07-19
					
					1936
					
				

			

		

		

			
				

超过一定高度自动显示垂直滚动条
注意:IE8支持max-height属性
显示垂直滚动条的要点:
(1)设置元素的高度
(2)设置overflow-y为auto
实例:
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta 

			
		

	





	

		

			

				
					
html下拉菜单不改变父元素高度,html – 在内部div上设置max-height,所以滚动条出现,但不在父div上...

				
			

			

				

					weixin_40004502的博客
				

				

					06-03
					
					220
					
				

			

		

		

			
				
我有我的HTML,CSS按照下面的代码设置.我还添加了一个JSFiddle链接,因为它将更方便地查看代码.我遇到的问题是,当#right-col div中的#inner-right div中有很多文本时,我想要一个滚动条仅出现在#内右边.我当前的代码显示了两个滚动条：#inner-div和#right-col.如果我将#右键上的CSS更改为overflow：hidden,以便摆脱外部滚动条,内滚动...

			
		

	





	

		

			

				
					
Echarts tooltip + vue 数据过多展示滚动条显示数据

				
			

			

				

					记录常见的问题以及解决办法
				

				

					03-31
					
					1019
					
				

			

		

		

			
				
Echarts tooltip + vue 数据过多展示滚动条显示数据。

			
		

	





	

		

			

				
					
Duilib CScrollBarUI 滚动条位置越界产生 滚动条Bar 无法显示，以及位置异常BUG

				
			

			

				

					C2018的博客
				

				

					05-27
					
					897
					
				

			

		

		

			
				
更改代码 DoEvent() MouseMove 事件时计算位置


if( (m_uThumbState & UISTATE_CAPTURED) != 0 ) {
    if( !m_bHorizontal ) {
	int vRange = m_rcItem.bottom - m_rcItem.top - m_rcThumb.bottom + m_rcThumb.top - 2 * ...

			
		

	





	

		

			

				
					
超出内容时出现滚动条

				
			

			

				

					lidog的博客
				

				

					05-20
					
					7108
					
				

			

		

		

			
				
需求是 div 有预定高度；当其中的内容没有超过高度时 现实默认；当内容超出div 高度时，让其出现滚动条，防止撑开div影响布局；
让 div 
超出内容时出现滚动条 ，正确的做法是：


overflow-y:auto;
max-height:320px;


添加这两个属性以后，就可以实现了；当然，为了保险起见，还可以添加一个
overflow-x：hidden；
防止

			
		

	





	

		

			

				
					
js 获取滚动条的高度 以及 设置滚动条的高度

				
			

			

				

					weixin_34383618的博客
				

				

					08-19
					
					1590
					
				

			

		

		

			
				
//设置窗口滚动条高度
function setScrollTop(top){
      if(!isNaN(top))document.body.scrollTop = top;
}

//取窗口滚动条高度 
    function getScrollTop(){
        var scrollTop=0;
        if(document.docume...

			
		

	





	

		

			

				
					
菜鸟学习篇--如何解决内容超出页面高度出现滚动条问题

				
			

			

				

					YJJ19的博客
				

				

					09-18
					
					3662
					
				

			

		

		

			
				
当页面内容超出页面高度并且出现滚动条时，可以直接在页面最外层添加overflow:hidden;但由于vue组件直接给body添加css样式是无效的，因此，可以这么做：
 mounted() {
    document.getElementsByTagName("body")[0].style = "overflow: hidden;";
  },

其实不仅可以用overflow:hidden;    height:100vh;    overflow-x: hidden;  overflow-y: h

			
		

	





	

		

			

				
					
table th、td设置最大高，超高度出现滚动条

				
			

			

				

					xjh的博客
				

				

					08-17
					
					6238
					
				

			

		

		

			
				
th、td最大高超出滚动，table border随滚动条移动

			
		

	





	

		

			

				
					
容器高度不定，超出高度出现滚动条

				
			

			

				

					Welcome
				

				

					10-27
					
					1358
					
				

			

		

		

			
				
1、父容器
.parent
{
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

2、子容器
.child
{
	overflow-y: auto; /*或者overflow-y: scroll;*/
}




			
		

	





	

		

			

				
					
当div高度超出时出现滚动条限制

				
			

			

				

					05-31
				

			

		

		

			
				
要使div在高度超出时出现滚动条限制，需要将其CSS样式中的overflow属性设置为auto或scroll，例如：  ``` div {  height: 200px;  overflow: auto; } ```  这样，当div中的内容超出200px的高度时，就会出现垂直滚动条...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值