<!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. gnome中文翻译之po

    文件类型: po: 用msginit分析pot文件,生成各语言对应的po文件,比如中文的zh_CN.po. mo: 用msgfmt将po文件编译生成mo文件,这是二进制文件,不能直接编辑. gmo: ...

  2. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 浙工大C语言入门指南 （仅供参考）

    C语言书籍推荐 浙工大图书馆中,计算机的书都集中在三楼TP区.我个人推荐下面这么几本书. <Head First C>.Head First系列的书质量基本都很高.该书有很多插图,总体上就 ...

  4. 基于TCP的NAT子网穿透实验

    不得不说,在国内IP紧缺的现状下,NAT发挥了无比巨大的作用:它以把IP和端口重新分配的方式,满足了广大人民群众上网的强烈需求.但是对于个人服务器以及在内网中基于网络的嵌入式设备,却是个比较尴尬的事情 ...

  5. JSP三大指令 /9大内置对象 /Javabean / EL

    一个jsp页面中,可以有0~N个指令的定义! 1. page --> 最复杂:<%@page language="java" info="xxx". ...

  6. 打造轻量级自动化测试框架WebZ

    一.什么是WebZ WebZ是我用Python写的“关键字驱动”的自动化测试框架,基于WebDriver. 设计该框架的初衷是:用自动化测试让测试人员从一些简单却重复的测试中解放出来.之所以用“关键字 ...

  7. linux tcp 好文

    http://blog.csdn.net/htttw/article/details/7521053

  8. Android UI基础教程 目录

    从csdn下载了这本英文版的书之后,又去京东搞了一个中文目录下来.对照着看. 话说,这本书绝对超值.有money的童鞋看完英文版记得去买中文版的~~ Android UI基础教程完整英文版 pdf+源 ...

  9. /etc/shadow字段详解

    1)/etc/shadow 概说: /etc/shadow文件是/etc/passwd 的影子文件,这个文件并不由/etc/passwd 而产生的,这两个文件是应该是对应互补的:shadow内容包括用 ...

  10. Windows窗口样式速查参考，Delphi窗口控件的风格都有它们来决定（附Delphi何时用到它们，并举例说明）good

    /* 窗口样式参考列表(都是GetWindowLong的GWL_STYLE风格,都是TCreateParams.Sytle的一部分),详细列表如下:https://msdn.microsoft.com ...