<!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=utf-8">
           <title>Special Layout</title>
           <style type="text/css">
               html, body {
                  width: 100%;
                  height: 100%;
                  margin: 0;
                  padding: 0;
              }
               body {
                 
               }
              #wrapper {
                   position: relative;
                   top: 10%;
                   margin: 0 auto;
                  width: 80%;
                   min-width: 400px;
                   height: 80%;
                   background: #000;
               }
               #left {
                   float: left;
                  position: relative;
                   width: 200px;
                   height: 100%;
                  margin-right: -200px;
                  background: blue;
                  overflow: hidden;
               }
               #right {
                   position: relative;
                  width: auto;
                   height: 100%;
                  background: green;
                   margin-left: 200px;
                   overflow: hidden;
               }
              #lefttop {
                   width: 100%;
                  height: 100px;
                   background: red;
              }
               #leftbottom {
                  width: 100%;
                   background: #0ff;
                   height: auto !important;
                   height: 9999px;
               }
               #left>#leftbottom {
                   position: absolute;
                   top: 100px;
                   bottom: 0;
               }
               #righttop {
                   width: 100%;
                   height: 100px;
                   background: #f0f;
               }
               #rightbottom {
                   width: 100%;
                   background: #ff0;
                   height: auto !important;
                   height: 9999px;
               }
               #right>#rightbottom {
                   position: absolute;;
                   top: 100px;
                   bottom: 0;
               }
           </style>
       </head>
       <body>
           <div id="wrapper">
               <div id="left">
                   <div id="lefttop">lefttop</div>
                   <div id="leftbottom">leftbottom</div>
               </div>
               <div id="right">
                   <div id="righttop">righttop</div>
                   <div id="rightbottom">rightbottom</div>
               </div>
           </div>
       </body>
  </html>

div页面居中(上下左右)的更多相关文章

  1. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  2. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  4. div层上下左右居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 多行文字在一个div中上下左右居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. css div图片上下左右居中

    <style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...

  7. div内容上下左右居中

    <!-- 遮罩层 --> <div id="test" > <div style="position:absolute;top:50%;le ...

  8. 使一个div元素上下左右居中

    第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...

  9. 一个Div在BOdy中上下左右居中

    在body中让一个DIv居中 上下左右 <body> <div style=" width:800px; height:500px; position:absolute; ...

随机推荐

  1. 不为人知的Locked

    在属性面板上,有一个Locked属性,什么时候添加上去的,真是没有注意到,它的说明为:确定是否可以移动控件或调整控件的大小,默认是为false的,设置为true以后,当前选中的控件会在左上角出现一个锁 ...

  2. Deep Belief Network

    Deep Belief Network3实例3.1 测试数据按照上例数据,或者新建图片识别数据. 3.2 DBN实例//****************例2(读取固定样本:来源于经典优化算法测试函数S ...

  3. Git关联远程GitHub仓库

    一.本地安装GIT版本控制软件 二.配置Git,设置用户信息 git config --global user.name "jack" git config --global us ...

  4. new作为修饰符

    new 修饰符与 new 操作符是两个概念 new 修饰符用于声明类或类的成员,表示隐藏了基类中同名的成员.而new 操作符用于实例化一个类型 new 修饰符只能用于继承类,一般用于弥补基类设计的不足 ...

  5. python基础之元组（Tuple）、字典（Dictionary）详解

    元组定义 元组是另一个数据类型,类似于List(列表). 元组用”()”标识.内部元素用逗号隔开.但是元素不能二次赋值,相当于只读列表. 举例: tuple = ( ‘abcd’, 786 , 2.2 ...

  6. phalcon做日报告提交平台总结

    总结:通过开发日报告提交系统,掌握了基本的phalcon框架原理和PHP语言.也了解了一些linux常用指令,收获颇丰. 下面对项目中所遇到的问题进行总结: 1.前台数据传往后台所用的三种方法: (1 ...

  7. C#事件（Event）学习日记

    event 关键字的来由,为了简化自定义方法的构建来为委托调用列表增加和删除方法. 在编译器处理 event 关键字的时候,它会自动提供注册和注销方法以及任何必要的委托类型成员变量. 这些委托成员变量 ...

  8. PHP日常杂记

    1.php点击按钮跳转页面 <input type="button" onclick="window.location.href='login.php'" ...

  9. Linux Kernel 'perf_event.c'本地权限提升漏洞

    漏洞版本: Linux Kernel 3.11-rc4 漏洞描述: Linux Kernel是一款开源的操作系统 Linux Kernel 'perf_event.c'存在一个安全漏洞,允许本地攻击者 ...

  10. js或者cs代码拼接html

    一:使用到的jQuery 文档操作方法 html() 设置或返回匹配的元素集合中的 HTML 内容. append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容. empty() 删除匹配的 ...