<!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. 通过EL表达式，后台数据传到前台，引号及后面的数据被截断的问题：

    问题描述: 通过EL表达式,后台数据传到前台,引号及后面的数据被截断的问题: 如: 前端页面: html: 问题解决: 1.一个简单的办法,把 input 写成这样: <input type=& ...

  2. session cookie 相结合实现

    数据库配置文件 config.php <?php// config.php 数据库连接文件define('DB_HOST', 'localhost');define('DB_USER', 'ro ...

  3. PHP实战开发教程

    对于PHP初学者来说,一上手就学习庞大的PHP语法无疑很打击自信心.其实即便是很熟练的程序员,也未必对所有的语法非常熟悉.通常熟练的程序员比普通的程序员的优势在于对基本语法的理解非常透彻,而且常用的一 ...

  4. linux制作文件系统

    1.获取文件系统源码并解压 这里使用的源码是天嵌提供的“root_qtopia_2.2.0_2.6.30.4_20100601.tar.bz2” #tar xvf root_qtopia_2..0_2 ...

  5. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  6. Scut 上线后遇到的问题

    1. 上线后的大并发问题: var sem = new Semaphore(_accepts, _accepts); while (true) { sem.WaitOne(); #pragma war ...

  7. [BZOJ 1500] [NOI2005] 维修数列

    题目链接:BZOJ - 1500 题目分析 我要先说一下,这道题我写了一晚上,然后Debug了一整个白天..........再一次被自己的蒟蒻程度震惊= = 这道题是传说中的Splay维护数列的Bos ...

  8. [BZOJ 1053] [HAOI 2007] 反素数ant

    题目链接:BZOJ 1053 想一想就会发现,题目让求的 1 到 n 中最大的反素数,其实就是 1 到 n 中因数个数最多的数.(当有多于一个的数的因数个数都为最大值时,取最小的一个) 考虑:对于一个 ...

  9. Prefixes and Suffixes

    Codeforces Round #246 (Div. 2) D:http://codeforces.com/contest/432/problem/D 题意:给你一个长度不超过10^5的字符串.要你 ...

  10. HDFS文件系统基本文件命令、编程读写HDFS

    基本文件命令: 格式为:hadoop fs -cmd <args> cmd的命名通常与unix对应的命令名相同.例如,文件列表命令: hadoop fs -ls 1.添加目录和文件 HDF ...