html如何让div元素铺满整个桌面

最新推荐文章于 2024-04-20 18:01:19 发布
最新推荐文章于 2024-04-20 18:01:19 发布
阅读量9.6k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31135027/article/details/79640035
版权
参考文章：https://www.cnblogs.com/zhangmei/p/6395547.html 
 
 
div {

　　position:absolute;

　　width:100%;

　　height:100%;

}
上述的css会让你的所有div元素铺满整个桌面，为了避免这个 
 
 
 
div.one {

　　position:absolute;

　　width:100%;

　　height:100%;

}
你可以这样定义，在需要铺满屏幕的div元素加上一个class=one，即 
 
 
 
 
 
<div class="one"></div>
也可以直接用下面的代码 
 
 
 
<div style="background: #eff7ff;position:absolute;width:100%;height:100%;"> 
 
 
 
 
 
 
 
 
 


                

        

        

    




    

      

        

            

              
                
                  qq_31135027
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
怎么让div盒子撑满整个网页

				
			

			

				

					weixin_48047636的博客
				

				

					04-12
					
					1646
					
				

			

		

		

			
				
HTML代码
<body>
    <!-- <h1> 写一个和网页一样达到div </h1> -->
    <div class="box"></div>
</body>

第一种方法–>设置html和body宽高为100%
<style>
    html,body{
        width: 100%;
        height: 100%;
    }
    .box{
        

			
		

	



                

              
                



	

		

			

				
					
如何让div覆盖整个页面？

				
			

			

				

					xiaofengxiaoling的专栏
				

				

					08-23
					
					8526
					
				

			

		

		

			
				
得到div高宽
var hA =document.getElementById("div1"); 
hA.style.width = window.screen.availWidth-20; //得到宽度 
var s_height=document.body.scrollHeight; 
if(s_height<window.screen.availHeight) 
{ 
s_height=wi

			
		

	



                


  
              

                


	

		

			

				
					
【前端】用CSS实现div全屏铺满的方式

					
最新发布

				
			

			

				

					良月柒
				

				

					04-20
					
					1792
					
				

			

		

		

			
				
以上是几种常见的CSS实现div全屏铺满的方式。无论是使用绝对定位和百分比宽高、vh/vw单位，还是Flexbox布局，都可以轻松地实现div元素全屏铺满浏览器窗口的效果。你可以根据实际需求和项目要求，选择适合自己的方法来实现全屏效果。不管做什么，只要坚持下去就会看到不一样！

			
		

	





	

		

			

				
					
html5中平铺图片,HTML布局排版2 div的和图片平铺方便管理

				
			

			

				

					weixin_39968946的博客
				

				

					06-04
					
					517
					
				

			

		

		

			
				
在HTML里，由于浏览器显示器等差异，浏览器的宽度也会有变化，为了适应不同的宽度，需要用到平铺。例如页面前面的固定的条等，如果是纯色，可以用背景色，如果不是纯色，是渐变等，可以用条状图平铺。常见的布局方式一般有table和div，如果需要单个图片和渐变平铺都需要，则不能放到一个td里，或一个div里。可以的形式：图片是固定大小的：div(固定宽高，盛放图片)div(盛放条状平铺)两个div并排fl...

			
		

	



		

			
		



	

		

			

				
					
html网页自动铺满屏幕,HTML+CSS入门 高度如何铺满全屏

				
			

			

				

					weixin_28797919的博客
				

				

					05-30
					
					5930
					
				

			

		

		

			
				
本篇教程介绍了HTML+CSS入门 高度如何铺满全屏，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。所以，要想写出跨浏览器的CSS，你必须采用标准模式。好像太绝对了，呵呵。好吧，...

			
		

	





	

		

			

				
					
如何让div平铺整个屏幕

				
			

			

				

					WHY_222的博客
				

				

					04-22
					
					5544
					
				

			

		

		

			
				
解决方法：html,div{    width:100%;    height:100%;    background:yellow;}因为：1、如果要以百分比设置元素（div）的尺寸，必要以父元素的尺寸作为参考，如果父元素没有设置尺寸，那么子元素（div）尺寸自然不会生效。2、所以如果设置div的高度为100%，那么他的参考元素就是是body，那么如何设置body的尺寸呢？3、在怪异模式下，bo...

			
		

	





	

		

			

				
					
详解CSS3原生支持div铺满浏览器的方法

				
			

			

				

					09-22
				

			

		

		

			
				
标题中的“详解CSS3原生支持div铺满浏览器的方法”是指使用CSS3的特性来让一个div元素充满整个浏览器窗口，实现全屏显示的效果。这个方法对于创建响应式设计和视觉冲击力强的网页布局非常有用。描述中提到，过去常常...

			
		

	





	

		

			

				
					
如何让Flash不遮挡HTML div元素的技巧

				
			

			

				

					12-30
				

			

		

		

			
				
让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。  方法如下：  针对IE 在<object></object>内加上参数...

			
		

	





	

		

			

				
					
23.（leaflet篇）leaflet叠加html（leaflet叠加div元素）.zip

				
			

			

				

					07-16
				

			

		

		

			
				
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/118784518

			
		

	





	

		

			

				
					
js全屏div铺满

				
			

			

				

					06-11
				

			

		

		

			
				
js全屏div铺满

			
		

	





	

		

			

				
					
html页面撑满整屏幕,让div撑满整个屏幕的方法（css）

				
			

			

				

					weixin_39990410的博客
				

				

					06-08
					
					1万+
					
				

			

		

		

			
				
这篇文章主要介绍了关于让div撑满整个屏幕的方法(css)，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在body只有一个p的时候，可以通过这样的方式让p撑满整个屏幕。1.给p设置定位。复习一下——css中position有五种属性：static:默认值，没有定位absolute:绝对定位，相对于父级元素进行定位relative:相对定位fixed:固定定位,相对于浏览器窗口进行定...

			
		

	





	

		

			

				
					
让div占满整个屏幕的方法

				
			

			

				

					noobchen_的博客
				

				

					11-03
					
					647
					
				

			

		

		

			
				
让div占满整个屏幕的方法
1.html，body100%
html, body {
  width: 100%;
  height: 100%;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;




			
		

	





	

		

			

				
					
设计主要首页 div平铺居中 并排显示的效果

				
			

			

				

					
				

				

					03-27
					
					511
					
				

			

		

		

			
				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=u.

			
		

	





	

		

			

				
					
CSS 实现一个div铺满整个屏幕的三种方法（CSS Reset）

				
			

			

				

					单枪匹码
				

				

					11-01
					
					4万+
					
				

			

		

		

			
				
让一个div铺满整个页面：
一、需求描述：
比如说我们现在有一个页面，页面中有一些文字，但是页面需要添加背景，并且整个页面要被背景铺满。
二、问题描述：
其实我们可以在body中添加一个div，然后设置这个div的height为auto，然后给整个div添加一个background，那么如果该div的内容足够多的话，该div就会铺满整个页面（即：整个页面都被添加的背景铺满），但是如果该div的内容...

			
		

	





	

		

			

				
					
div铺满全屏的三种方式

				
			

			

				

					gcy_rose的博客
				

				

					02-06
					
					3万+
					
				

			

		

		

			
				

继承法

&lt;style&gt;
  * {
        margin:0;
        padding:0;
    }
   	html,body{
   		height:100%;
   	}
   	.box{
   		height:100%;
   		background-color:blue;
   	}
&lt;/style&gt;

&lt;div class=...

			
		

	





	

		

			

				
					
html div高度 满屏幕,div百分百占满屏幕的两种css写法

				
			

			

				

					weixin_39538789的博客
				

				

					06-15
					
					3762
					
				

			

		

		

			
				
很多人都知道，div容器在一般情况下即使设置高为100%也不会真的占满屏幕(浏览器窗口高度)，那么究竟有没有办法用样式实现100%屏高呢？答案是肯定的。今天益吾库就来分享一下div百分百占满屏幕的两种css写法，一种是绝对定位方法，另一种是根容器百分比方法，具体实例代码如下：绝对定位方法：*{padding:0;margin:0;}#myDiv{width:100%;height:100...

			
		

	





	

		

			

				
					
将div铺满body三种方式

				
			

			

				

					BBX__XB的博客
				

				

					11-30
					
					3098
					
				

			

		

		

			
				
css权威指南》指出，如果没有显示声明包含块的height，百分数高度会重置为auto，所以上面div1height设置为任何值都跟设置没设置一样。想要令body里一个块元素（div）占全屏，相信很多人（包括我）都会直接把body设置宽高100%，但实际却是，行不通。因为body跟div一样是块元素，直接赋值给块元素height:100%，相当于就是默认值的独占一行。所以这里写body{ width:100%;}，其实是毫无作用的。优点：①简洁，②缩小浏览器，拉动滚动条也还是满屏背景。

			
		

	





	

		

			

				
					
如何让div的大小占满整个屏幕？

				
			

			

				

					会清的博客
				

				

					09-21
					
					3万+
					
				

			

		

		

			
				
一、先来代码


	
		
		
		
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				width: 100%;
			}
			.test{
				height: 100%;
				width: 100%;
				background: #EE6AA7;
			}

			
		

	





	

		

			

				
					
让body、Div占满整个浏览器的窗口

					
热门推荐

				
			

			

				

					BiuBiu_Tian(田)
				

				

					08-21
					
					6万+
					
				

			

		

		

			
				
让HTML标签铺满整个浏览器的窗口，让DIV标签占满整个浏览器的窗口，让父级元素占满整个浏览器的窗口

			
		

	





	

		

			

				
					
如何让水印铺满整个屏幕

				
			

			

				

					06-09
				

			

		

		

			
				
您可以使用CSS样式来实现让水印铺满整个屏幕。  首先，在HTML文档中创建一个div元素并为其添加一个类，例如：  ``` <div class="watermark"></div> ```  接下来，在CSS样式表中为该类添加以下样式：  ``` .watermark...

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值