<!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. chrome输入框记住密码导致背景黄色的解决方案

    在form头部增加以下内容 <input type="text" style="display:hidden;"> <input type=& ...

  2. 有效解决js中添加border后动画bug问题

    做了个demo发现如果一个div不加border属性,用对象的offsetWidth属性来控制width没问题,但是如果一旦加了border属性,问题就来了. 其实offsetWidth属性获取的的是 ...

  3. 虚拟化技术与"云"

    虚拟化技术: 如网站在某一时间访问量大,平时访问量少,如果一直保持大量的服务器提供服务,显示效率好低,浪费资源,在 不增减服务器,存储设备,网络等实际物理设备,而是利用软件将这些物理设备虚拟化,在有必 ...

  4. CI源码引用使用--php引用demo，静态变量和引用关系

    CI源码引用使用在Common.php中,加载配置和类的方法 function &test() {     static $a = '';     if (!$a) {         $a ...

  5. __unset()魔术方法 删除类内私有属性

    __unset()魔术方法 删除私有属性 unset()对共有属性进行删除 可通过__unset()魔术方法对私有属性进行操作 当在类外部执行unset()函数时,自动执行类内__unset()魔术方 ...

  6. Linux 多用户和多用户边界

    1. 需求背景 2. 多用户的边界: 独立的工作目录 3. 多用户的边界:可操作/访问的资源 4. 多用户的边界: 可执行的操作 5. 多用户的特性标识: UID和GID -------------- ...

  7. Python 手册——调用解释器

    通常Python的解释器被安装在目标机器的 /usr/local/bin/python 目录下:把 /usr/local/bin 目录放进你的UNIX Shell 的搜索路径里,确保它可以通过输入py ...

  8. （Step1-500题）UVaOJ+算法竞赛入门经典+挑战编程+USACO

    http://www.cnblogs.com/sxiszero/p/3618737.html 下面给出的题目共计560道,去掉重复的也有近500题,作为ACMer Training Step1,用1年 ...

  9. js共享onload事件

    问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考. 一.对于小型 ...

  10. 用状态机STATE MACHINE实现有选择的文件转换

    用书上的例子实现在解析HTML文本时,对"<>"中的符号不进行字符转换. import sys import string from optparse import O ...