您的需求

您的需求是什么?

简单四步,轻松做网站

1

域名注册 主机/服务器购买

代注册账号,代购买域名和主机/服务器

3

网站开发设计

原创的网站设计,不仅能让您的网站大气漂亮,具有**性,还更利于搜索优化推广

4

网站上线

网站正式上线,提供完善的售后服务。

网站教程 SEO优化 网站建设 网站设计 广州网站建设
当前位置:首页>文章>网站建设
CSS写一个高度跟随宽度变化的DIV
所属栏目:网站建设 发布日期:2021-10-17

在响应式网站开发过程中,为了更方便地适合各种终端,我们并不方便设置一个DIV的高度。但是高度和宽度是成一定比例的。那么怎么样写CSS能更方便呢。

先上CSS  

html,body{margin: 0; padding: 0;}    
.container{background-color: silver;width:100%;position:relative;display: inline-block;}    
.dummy{margin-top: 100%;}    
/*如果需要长方形只需要更改此值即可,比如需要4:3的长方形,则应设为margin-top:75%。*/    
.content{position:absolute;left:0;right:0;top:0;bottom: 0;}

再来看看HTML

<div class="container">
		 <div class="dummy"></div>
		 <div class="content">asdfasdfasdf</div>
	</div>	


image.png


免费通话

24小时免费咨询

请输入您的联系电话,座机请加区号

电话

微信扫一扫

微信
顶部