<!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. CentOS 6.4 64位 安装 apache-tomcat-6.0.43

    下载 tomcat: 地址:http://mirrors.hust.edu.cn/apache/tomcat/tomcat-6/v6.0.43/bin/apache-tomcat-6.0.43.tar ...

  2. AS3.0面向对象的写法，类和实例

    package /*package是包路径,例如AS文件在ActionScript文件夹下,此时路径应为package ActionScript.必须有的.package中只能有一个class,在一个 ...

  3. js实现中文简繁切换效果

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

  4. 将VIM配置成强大的IDE（二）

    将VIM配置成强大的IDE(二) 前面我们已经安装好了vundle这一款强大的插件管理工具. 下面,当然是配置我们需要的插件了. 在VIM下面通过命令 help vundle 我们可以知道,VUNDL ...

  5. Meditation Guide

    Meditation “Stop!!!” don’t we just scream[vi. 尖叫:呼啸:发出尖锐刺耳的声音:令人触目惊心 ] this in our minds when the da ...

  6. 【读书笔记】【CLR via C#】【第一章】The CLR’s Execution Model

    内容提要 本章的目的是对.Net 框架的设计做一个总体的介绍,包括介绍框架中使用的一些技术.定义一些术语.同时会展示从源代码生成应用程序(或者一些包含了一些自定义类型的可以发布的组件),并且会解释程序 ...

  7. DataTable一些操作

    DataTable ReturnDt = new DataTable("Tab_Result"); ReturnDt.Columns.AddRange(new DataColumn ...

  8. Mvc Model 模板的获取【学习笔记】

    MVC的Model模板有两种:一种编辑模式(@Html.EditorFor()).一种显示模式(Html.DisplayFor()). 模板的获取与执行(以下转自这里): 当我们调用HtmlHelpe ...

  9. Web 研发模式演变

    前不久徐飞写了一篇很好的文章:Web 应用的组件化开发.本文尝试从历史发展角度,说说各种研发模式的优劣. 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 ...

  10. Java获取本机MAC地址

    为什么写这个呢?因为前几天看见网上有采用windows命令获取局域网和广域网MAC,查了查可以直接用JDK的方法. MAC可用于局域网验证,提高安全性. import java.net.InetAdd ...