<!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. PHP常用数组函数

      一.数组操作的基本函数 数组的键名和值 array_values($arr);  获得数组的值 array_keys($arr);  获得数组的键名 array_flip($arr);  数组中的 ...

  2. jQuery 个人随笔

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

  3. SPFA_YZOI 1662: Easy sssp

    题目描述 输入数据给出一个有N(2  < =  N  < =  1,000)个节点,M(M  < =  100,000)条边的带权有向图.  要求你写一个程序,  判断这个有向图中是 ...

  4. dedecms织梦如何删除所有的文章？

    dedecms织梦如何删除所有的文章?dede一键删除所有文章的SQL命令:  DELETE FROM dede_addonarticle WHERE aid >= 1 and aid<= ...

  5. Type 类型

    修改 type 类型 UPDATE  wd_order2 SET  info = array_append(info, row(2,100001, now() )::info )  WHERE id_ ...

  6. Quartz1.8.5例子(九)

    /* * Copyright 2005 - 2009 Terracotta, Inc. * * Licensed under the Apache License, Version 2.0 (the ...

  7. bzoj 2594: [Wc2006]水管局长数据加强版 动态树

    2594: [Wc2006]水管局长数据加强版 Time Limit: 25 Sec  Memory Limit: 128 MBSubmit: 934  Solved: 291[Submit][Sta ...

  8. 国内更新Android SDK汇总

    以下两个网站提供了响应的办法. http://www.androiddevtools.cn/ --国内镜像 http://blog.csdn.net/boonya/article/details/38 ...

  9. DJANGO不同应用之间的用户迁移

    因为重新规划新的项目,数据库表结构和以前不一定了,但是想保存以前的很多用户认证方面的东东. 于是看了一下DJANGO的导入导出功能. ~~~~~~~~~~~~~~~~~~~ 数据导入: python ...

  10. 【POJ3415】 Common Substrings（后缀数组|SAM）

    Common Substrings Description A substring of a string T is defined as: T(i, k)=TiTi+1...Ti+k-1, 1≤i≤ ...