元素滚动条占据部分是否占据height和width尺寸

最新推荐文章于 2023-03-03 15:02:00 发布
最新推荐文章于 2023-03-03 15:02:00 发布
阅读量673 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/573355
版权

本章节介绍一下元素的滚动条占据的部分是否包含在此height或者width尺寸之中

下面就通过代码实例做一下演示。

代码如下:

 
 
 
  
 
   
 
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 
        

          25 
        
 		 
        
 
         
 
          <!DOCTYPE html>< 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
         
 
          < 
          title 
          >scrollWidth和scrollHeight属性-蚂蚁部落</ 
          title 
          > 
         
 
         
 
          < 
          style 
          type 
          = 
          "text/css" 
          > 
         
 
         
 
          *{ 
         
 
         
 
             
          margin:0px; 
         
 
         
 
             
          padding:0px; 
         
 
         
 
          } 
         
 
         
 
          #box{ 
         
 
         
 
             
          width:200px; 
         
 
         
 
             
          height:150px; 
         
 
         
 
             
          background-color:red; 
         
 
         
 
             
          margin:0px auto; 
         
 
         
 
             
          margin-top:50px; 
         
 
         
 
             
          overflow:scroll; 
         
 
         
 
             
          padding:0px; 
         
 
         
 
          } 
         
 
         
 
          </ 
          style 
          > 
         
 
         
 
          </ 
          head 
          > 
         
 
         
 
          < 
          body 
          > 
         
 
         
 
          < 
          div 
          id 
          = 
          "box" 
          ></ 
          div 
          > 
         
 
         
 
          </ 
          body 
          > 
         
 
         
 
          </ 
          html 
          > 
         
 
        
 
 
   
 
  
 
 
 
 
在上面的演示效果可以看出，滚动条占据的部分包含在height和width中。
 
 

 
 
原文发布时间为：2017-2-17
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
原文链接：元素滚动条占据部分是否占据height和width尺寸
 


                

        

        




    




    

      

        

            

              
                
                  weixin_33743248
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
css滚动条占了宽度,css – 计算定位元素时的滚动条宽度

				
			

			

				

					weixin_35537968的博客
				

				

					08-04
					
					1772
					
				

			

		

		

			
				
我有一个最大宽度的布局,当屏幕宽度大于最大值时,它是水平居中的.布局包括一个固定的标题&菜单;当屏幕宽度小于最大值时,菜单的左侧位置为0,并且当屏幕宽度超过最大值时,菜单的左侧位置需要与布局的其余部分的左边缘齐平.这是它应该如何看：*{Box-sizing:border-Box;margin:0;padding:0;}header{align-items:center;background...

			
		

	



                

              
                



	

		

			

				
					
页面出现滚动条的时候如何让滚动条不影响页面宽度

				
			

			

				

					09-22
				

			

		

		

			
				
主要介绍了页面出现滚动条的时候如何让滚动条不影响页面宽度，需要的朋友可以参考下

			
		

	



                


  
              

                


	

		

			

				
					
css 设置滚动条不挤压宽高

				
			

			

				

					韩旭的博客
				

				

					03-03
					
					2581
					
				

			

		

		

			
				
【代码】css 设置滚动条不挤压宽高。

			
		

	





	

		

			

				
					
HTML中的几何与滚动

				
			

			

				

					swallowblank的博客
				

				

					01-22
					
					183
					
				

			

		

		

			
				
元素具有以下几何属性：
offset系列：

offsetParent — 是最接近的 CSS 定位的祖先（relative、absolute、fixed），或者是 td，th，table，body。
offsetLeft/offsetTop — 是相对于 offsetParent 的左上角边缘的坐标。
offsetWidth/offsetHeight — border+padding+content。

client系列

clientLeft/clientTop — 从元素padding外侧左上角到bo

			
		

	



		

			
		



	

		

			

				
					
Html+CSS实现滚动条不挤占内容区宽度

					
热门推荐

				
			

			

				

					WWF_HelloWorld
				

				

					09-01
					
					3万+
					
				

			

		

		

			
				
思路来源于该文章：https://www.cnblogs.com/yigeqi/p/5488554.html
但该文章似乎有什么重要的要点没有交代，直接按照文中的css写并不能实现所要的效果。

1. 目的：
有一个滚动区，默认是不显示滚动条的，在鼠标移入时显示滚动条，在正常情况下，滚动条会挤占内容区宽度，使得内容区变窄，会晃动一下。
要实现的效果是，鼠标移入显示滚动条，滚动条就像浮在上层一样。...

			
		

	





	

		

			

				
					
滚动条区域大小自适应分辨率

				
			

			

				

					rqgxy的博客
				

				

					11-29
					
					1900
					
				

			

		

		

			
				
需求描述
报表在WEB页面输出的时候，行、列都很多，需要设置横向、纵向滚动条来固定报表表头。这样，就造成针对客户端不同的分辨率的显示器，滚动条的高度和宽度固定，对于分辨率小的机器，在页面上看不到滚动条，分辨率大的机器，滚动条右下方留出了很大的空白，这样造成页面不美观，影响用户体验。
 
解决方法
可以通过jsp调节参数实现。
步骤一：
1.在客户访问一个报表页面之前，加一个redire

			
		

	





	

		

			

				
					
Qt悬浮滚动条-滚动条样式

				
			

			

				

					11-20
				

			

		

		

			
				
在“Qt悬浮滚动条-滚动条样式”这个主题中，我们主要探讨如何创建一个不占用控件实际宽高的滚动条，同时增强其视觉效果和交互体验。  首先，让我们了解滚动条的基本概念。Qt中的QScrollBar类提供了水平和垂直滚动条...

			
		

	





	

		

			

				
					
用JavaScript获取DOM元素位置和尺寸大小的方法

				
			

			

				

					12-01
				

			

		

		

			
				
在JavaScript中，获取DOM元素的位置和尺寸大小是Web开发中常见的需求，特别是在创建动态效果或者进行复杂的布局计算时。为了实现这些功能，开发者需要熟悉一些关键的DOM属性，包括`offsetWidth`, `clientWidth`, `...

			
		

	





	

		

			

				
					
用css给tbody加垂直滚动条的具体思路及样式代码

				
			

			

				

					12-13
				

			

		

		

			
				
在网页设计中，有时我们需要对表格的 tbody 部分添加垂直滚动条，以便当数据过多时，用户可以轻松地浏览和查看所有信息。这里我们将详细介绍如何使用 CSS 实现这一功能，并提供相应的代码示例。  首先，理解核心思路...

			
		

	





	

		

			

				
					
Html+CSS实现滚动条不挤占内容区宽度.zip

				
			

			

				

					09-01
				

			

		

		

			
				
看博客就能懂，不要轻易浪费积分下载该文件
博客地址：https://blog.csdn.net/fukaiit/article/details/100069537

			
		

	





	

		

			

				
					
android开发教程之文本框加滚动条scrollview

				
			

			

				

					09-04
				

			

		

		

			
				
此外，滚动条的外观和行为可以通过其他属性进行定制，例如`android:scrollbars="vertical"`来启用垂直滚动条，`android:scrollbarAlwaysDrawVerticalTrack="true"`强制绘制滚动条轨道，以及`android:...

			
		

	





	

		

			

				
					
用CSS实现跟随滚动条漂浮层代码

				
			

			

				

					08-13
				

			

		

		

			
				
总的来说，CSS的`position`属性是实现跟随滚动条漂浮层的关键。通过巧妙地设置`top`、`bottom`、`left`和`right`属性，你可以自由地定制漂浮层在页面上的位置，为用户提供更流畅的浏览体验。在实际项目中，可以结合...

			
		

	





	

		

			

				
					
【原创】告别恼人的水平滚动条——滚动条宽度到底是多少？

				
			

			

				

					weixin_30535843的博客
				

				

					07-16
					
					188
					
				

			

		

		

			
				
相信不管是web前端还是后台的程序员，都讨厌网页水平方向出现滚动条。而要避免出现水平滚动条，计算宽度是必不可少的。而在设计过程中，设计师一般避免计算这个右侧滚动条的宽度。为了避免出现水平滚动条，而将宽度设为比具体分辨率少五六十像素的宽度。如YUI推荐的宽度750px对800*600的分辨率，950px或974px对1024*768的分辨率。一般认为：这个滚动条的宽度为20px，那窗口右侧的滚动条的...

			
		

	





	

		

			

				
					
滚动条宽度到底是多少？

				
			

			

				

					Thinking Code
				

				

					02-04
					
					7769
					
				

			

		

		

			
				
滚动条宽度到底是多少？


     相信不管是web前端还是后台的程序员，都讨厌网页水平方向出现滚动条。而要避免出现水平滚动条，计算宽度是必不可少的。而在设计过程中，设计师一般避免计算这个右侧滚动条的宽度。为了避免出现水平滚动条，而将宽度设为比具体分辨率少五六十像素的宽度。如YUI推荐的宽度750px对800*600的分辨率，950px或974px对1024*768的分辨率。一般认为：这个

			
		

	





	

		

			

				
					
overflow 滚动条占位的问题

				
			

			

				

					抱着肩膀笑看看
				

				

					05-30
					
					1437
					
				

			

		

		

			
				
关于overflow 滚动条出现的问题
1.overflow:auto 页面小于规定高度后，出现滚动条，大于规定高度，滚动条消失,不占位置大小
2.overflow:scroll;页面小于规定高度后，出现滚动条，大于规定高度，滚动条消失,但是占位置大小

...

			
		

	





	

		

			

				
					
css：overlay使滚动条不占据位置

				
			

			

				

					1111111111
				

				

					12-06
					
					6704
					
				

			

		

		

			
				
原始代码：


overflow-x: auto;

原始效果：

滚动条占了高度，位于表格的下方。



改动后的代码：


overflow-x: overlay;

滚动条叠加在表格之上，不过因为滚动条没有设置透明度，所以会遮挡住数据，我们可以通过css来设置滚动条的样式。




...

			
		

	





	

		

			

				
					
udp分片报文pcap文件

					
最新发布

				
			

			

				

					07-18
				

			

		

		

			
				
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片

			
		

	





	

		

			

				
					
这样实现的滚动条还是占据宽度的，我需要的是滚动条飘浮在界面上，不入文档流

				
			

			

				

					07-17
				

			

		

		

			
				
如果你想要实现一个飘浮在界面上且不占据宽度的滚动条，可以使用一些技巧。以下是一种常用的方法：  首先，你可以创建一个固定定位的容器，用于包裹你的内容和滚动条。设置这个容器为固定定位可以让它飘浮在界面上。...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值