zoukankan      html  css  js  c++  java
  • 三行单列 上下固定高度 中间自适应

    1:方法一
    <!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=gb2312" />
    <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;
    80%;
    margin:0 auto;
    position:relative;
    }
    #box > div {
    display:table-row;
    }
    #header,
    #footer {
    background:#fcc;
    height:50px;
    }
    #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 {
    100%;
    z-index:3;
    position:absolute;
    }

    #footer {
    bottom:0;
    }
    #main {
    height:100%;
    z-index:1;
    position:relative;
    }
    #main #wrap {
    position:absolute;
    top:50%;
    100%;
    text-align:left;
    }
    #main #text {
    position:relative;
    100%;
    top:-50%;
    background:#ccc;
    }
    </style>
    <![endif]-->


    <body>
    <div id="box">
    <div id="header">header</div>
    <div id="main">
    <div id="wrap">
    <div id="text">
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    <p>内容内容</p>
    </div>
    </div>
    </div>
    <div id="footer">footer</div>
    </div>
    </body>
    </html>

    方法二
    <!DOCTYPE html>
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    body,html{
    margin:0;
    padding: 0;
    height: 100%;
    }
    </style>
    </head>
    <body >
    <div style="min-height: 50%;background-color: #e3a037;">
    test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br> test <br>
    </div>
    </body>
    </html>

  • 相关阅读:
    Unity3D-集成Sqlite
    unity3d 规范默认 目录结构
    隐私政策(玩儿英语)
    看漫画学知识:详解获得苹果推荐的4大要素
    加密你的SQLite
    解决JME SDK中文乱码(显示方框)
    Unity安卓共享纹理
    Android/iOS内嵌Unity开发示例
    Unity音量可视化——粒子随声浪跳动
    Windows环境下为Android编译OpenCV4.3
  • 原文地址:https://www.cnblogs.com/hyp5490-/p/6376843.html
Copyright © 2011-2022 走看看