<!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. 【elasticsearch】（1）centos7 使用yum安装elasticsearch 2.X

    前言 elasticsearch(下面称为ES)是一个基于Lucene的搜索服务器(By 百度百科:查看).所以他需要java的环境即jdk,这里提供懒人一键安装方式 # yum install ja ...

  2. DOM对象与Jquery对象区别

  3. #Leet Code# Divide Two Integers

    描述:不使用 * / % 完成除法操作.O(n)复杂度会超时,需要O(lg(n))复杂度. 代码: class Solution: # @return an integer def dividePos ...

  4. 工程经济学economics of project summarize

    什么是财务杠杆效应 财务杠杆效应是指由于固定费用的存在而导致的,当某一财务变量以较小幅度变动时.另一相关变量会以较大幅度变动的现象.也就是指在企业运用负债筹资方式(如银行借款.发行债券)时所产生的普通 ...

  5. C 字符串倒转，XCode中编译

    正在学习ios开发,在前期学习c时,常规方法直接倒转数组的值,只能用于非中文字符,否则出现乱码, 在网上找了点资料,可能是 IDE不一致,一直得不到自己想要的值.花时间自己改了一下,正常通过 //字符 ...

  6. 一张图看懂DNS域名解析全过程

    DNS域名解析是互联网上非常重要的一项服务,上网冲浪(还有人在用这个词吗?)伴随着大量DNS服务来支撑,而对于网站运营来说,DNS域名解析的稳定可靠,意味着更多用户的喜欢,更好的SEO效果和更大的访问 ...

  7. 使用token机制来验证用户的安全性－b

    登录的业务逻辑{    http:是短连接.         服务器如何判断当前用户是否登录?        // 1. 如果是即时通信类:长连接.    // 如何保证服务器跟客户端保持长连接状态? ...

  8. winfrom拷贝文件

    //File.Copy(@"C:\Users\Administrator\Pictures\bg.png", @"g:\images\bg.png", true ...

  9. int和Integer——个人学习

    1.首先要知道Java的八大基本数据类型:short.int.long.float.double.char.byte.boolean. 2.这八种基本数据类型对应的包装类分别为:Short.Integ ...

  10. eclipse 启动tomcat报Spring错误 Error creating bean with name 'serviceOrderBiz': Injection of autowired dependencies failed

    启动tomcat报异常,提示Sring无法创建serviceOrderBiz(第一行红字),继续看是因为有一个自动注入的字段无法注入ModuleInterfaceBiz(第二行红字),检查servic ...