注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

【转载】CSS高度自适应布局  

2015-05-30 13:12:17|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自Star.Huang《CSS高度自适应布局》
不叽歪,进主题。
经常遇到需要高度自适应布局:顶部(导航等)及底部固定高度、中间高度随浏览器高度自适应,how?利用CSS定位。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.top{
height: 70px;
background: #ccc;
}
.main{
position: absolute;
top: 70px; /* 重点在这 */
bottom: 70px;/* 重点在这 */
width: 100%;
background: #cfc;
}
.bottom{
position: absolute;
bottom: 0; /* 重点在这 */
width: 100%;
height: 70px;
background: #ff0;
}
</style>
</head>
<body>
<div class="top">顶部固定高度70px</div>
<div class="main">中间自适应高度(绝对定位,top、bottom值分别等于顶部、底部的高度)</div>
<div class="bottom">底部固定高度70px(绝对定位,bottom值为0)</div>
</body>
</html>

黄金法则:当元素绝对定位时,如果没有给它设定width、height,它的width、height是由它的top、bottom、right、left属性共同决定的。
效果:
CSS高度自适应布局 - Star.Huang - Star.Huang
 
  评论这张
 
阅读(3)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018