网页上中下三分布局即上下固定中间自适应
发布时间：2014-04-30 10:55:59 作者：佚名 
我要评论
我要评论网页上中下三分布局打破了传统的布局方式，实现所谓的上下固定，中间自适应，大家可以参考学习下
复制代码
代码如下:<!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="pragram" content="no-cache">
<!--网页不保存在缓存中，每次访问都刷新页面。-->
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<!--同上面意思差不多，必须重新加载页面-->
<!--网页在缓存中的过期时间为0，一旦网页过期，必须从服务器上重新订阅-->
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html,
body,
#box {
height:100%;
font:small/1.5 "宋体", serif;
}
body {
text-align:center;
}
#box {
text-align:left;
background:#666;
display:table;
width:80%;
margin:0 auto;
position:relative;
}
#box > div {
display:table-row;
}
#header,
#footer {
background:#fcc;
height:50px;
vertical-align:bottom;
}
#main {
background:#ccf;
}
#main #wrap {
display:table-cell;
background:#ffc;
vertical-align:middle;
}
#text {
text-align:center;
}
</style>
<!--[if IE]>
<style type="text/css">
#header,
#footer {
width:100%;
z-index:3;
position:absolute;
}
#footer {
bottom:0;
}
#main {
height:100%;
z-index:1;
position:relative;
}
#main #wrap {
position:absolute;
top:50%;
width:100%;
text-align:left;
}
#main #text {
position:relative;
width:100%;
top:-50%;
background:#ccc;
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<div id="header">header</div>
<div id="main">
<div id="wrap">
<div id="text">
<p>测试文本</p>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
相关文章
Opera浏览器怎么固定网页的缩放比例？使用Opera浏览器浏览网页的时候，无意中就放大缩小网页了，想要固定网页的缩放比例，该怎么设置呢？下面我们就来看看详细的教程，需要2017-02-08- 不同的网页就有不同的排版方式，字体的大小也会不一样，切换网页的时候，我们的眼睛就很难适应，下面教大家个技巧可以固定IE浏览器所有网页字体大小2015-05-26
- 说到浮动层，想必大家都有见到过吧，很熟悉，但是你知道它是怎么实现的呢？下面有个不错的示例为大家介绍下网页右侧的固定浮动层具体实现，感兴趣的朋友可以参考下2014-04-23
- 前几天在对网页页面进行布局的时候，遇到一个需要将网页的最下面一个层固定起来，不随网页的滚动条滚动,添加减少浏览器的菜单也不会变动的需求2011-11-06
- 这篇文章主要介绍了css实现网页栏目左侧固定当滚动到底部时自动调整位置 ,需要的朋友可以参考下2019-05-29
最新评论