典型页面布局

最新推荐文章于 2021-06-16 20:37:29 发布

weixin_30525825

最新推荐文章于 2021-06-16 20:37:29 发布

阅读量152

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/x123811/p/9964698.html

版权

一般典型的页面布局分为头部header、内容体content、底部footer,头部和footer为通用的，内容content可以放置不同类型的文档内容。

典型的页面html结构如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>测试页面</title>
</head>
<body>
  <div class="main">
      <div id="header">头部</div>
      <div id="content">内容区</div>
      <div id="foot">底部</div>
  </div>
</body>
</html>

主要css定义文件如下

 html,body {
            margin: 0;
            padding:0; height: 100%;
        }
        .main {
            min-height:100%;
            height: auto !important;
            height: 100%; /*IE6不识别min-height*/
            position: relative;

        }
        #header {
            padding: 10px;
            height: 50px;
            background-color: #30303B;
            line-height: 66px;
        }
#content {
            position: relative;
            padding-top: 108px;
            width: 1000px;
            margin: 0 auto;
            padding-bottom: 64px;/*等于footer的高度*/
        }
#foot {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 64px;/*脚部的高度*/ background: #6cf;
            clear:both;
        }