其实用绝对定位也可以实现高度和宽度的自适应，从而出现自适应大小的区域及滚动条。

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewMarking.aspx.cs" Inherits="FirsteLite.OMS.Checking.NewMarking" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
  6. <head runat="server">
  7.     <title>网上在线阅卷</title>
  8.     <style type="text/css">
  9.         *
  10.         {
  11.             margin:0px;
  12.             padding:0px;
  13.             border-width:0px;
  14.             font-size:12px;
  15.             }
  16.  
  17.         ul
  18.         {
  19.             list-style-type:none;
  20.            }
  21.  
  22.         #toolbar li
  23.         {
  24.             padding:2px;
  25.             text-align:center;
  26.             cursor:pointer;
  27.             }
  28.  
  29.         #toolbar li:hover
  30.         {
  31.             background:url(images/_down.png) no-repeat center center;
  32.             }
  33.  
  34.     </style>
  35.     <script type="text/javascript">
  36.         window.onload = function () {
  37.             document.getElementById("testImage").src = "../modelimage/11111111111601041701000301.GIF";
  38.         }
  39.     </script>
  40. </head>
  41. <body style="height:100%;">
  42.     <form id="form1" runat="server" style="width:100%;height:100%;">
  43.     <div style="width:100%; height:100%; position:relative;">
  44.         <div id="header" style="position:absolute;left:0px;top:0px;height:40px;width:100%;background-color:#2964A0;color:White;vertical-align:middle;">
  45.             banner<img alt="logo" src="data:images/lg.png" style="float:right;" />
  46.         </div>
  47.         <div id="left" style="position:absolute;left:0px;top:40px;bottom:25px;width:35px;background-color:#F3F4F6;border-right:1px solid gray;
  48.             vertical-align:top;overflow:hidden;">
  49.             <ul id="toolbar">
  50.                 <li><input type="button" title="评语" style="background-image:url('images/icon1.png');
  51.                         border:1px solid transparent;background-color:transparent;width:29px;height:20px;cursor:hand;" /></li>
  52.                 <li><input type="button" title="对号" style="background-image:url('images/icon4.png');
  53.                         border:1px solid transparent;background-color:transparent;width:29px;height:23px;cursor:hand;" /></li>
  54.                 <li><input type="button" title="半对" style="background-image:url('images/icon3.png');
  55.                         border:1px solid transparent;background-color:transparent;width:28px;height:28px;cursor:hand;" /></li>
  56.                 <li><input type="button" title="错号" style="background-image:url('images/icon2.png');
  57.                         border:1px solid transparent;background-color:transparent;width:29px;height:23px;cursor:hand;" /></li>
  58.                 <li><input type="button" title="快捷打分" style="background-image:url('images/icon5.png');
  59.                         border:1px solid transparent;background-color:transparent;width:29px;height:25px;cursor:hand;" /></li>
  60.                 <li style="border-top:1px solid gray; height:1px; line-height:1px; margin:5px 0px;padding:0px;"></li>
  61.                 <li><input type="button" title="优秀试题" style="background-image:url('images/icon6.png');
  62.                         border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
  63.                 <li><input type="button" title="典型试题" style="background-image:url('images/icon7.png');
  64.                         border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
  65.                 <li><input type="button" title="异常答卷" style="background-image:url('images/icon8.png');
  66.                         border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
  67.                 <li><input type="button" title="答错位置" style="background-image:url('images/icon10.png');
  68.                         border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
  69.                 <li><input type="button" title="参考答卷" style="background-image:url('images/icon9.png');
  70.                         border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
  71.                 <li style="border-top:1px solid gray; height:1px; line-height:1px; margin:5px 0px;padding:0px;"></li>
  72.                 <li><input type="button" title="默认大小" style="background-image:url('images/icon15.png');
  73.                         border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
  74.                 <li><input type="button" title="放大" style="background-image:url('images/icon13.png');
  75.                         border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
  76.                 <li><input type="button" title="缩小" style="background-image:url('images/icon14.png');
  77.                         border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
  78.                 <li><input type="button" title="前景色设置" style="background-image:url('images/icon22.png');
  79.                         border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
  80.                 <li><input type="button" title="背景色设置" style="background-image:url('images/icon21.png');
  81.                         border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
  82.                 <li style="display:none;"><input type="button" title="右旋转" style="background-image:url('images/icon23.png');
  83.                         border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
  84.                 <li style="display:none;"><input type="button" title="左旋转" style="background-image:url('images/icon24.png');
  85.                         border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
  86.                 <li><input type="button" title="等高" style="background-image:url('images/icon25.png');
  87.                         border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
  88.                 <li><input type="button" title="等宽" style="background-image:url('images/icon26.png');
  89.                         border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
  90.             </ul>
  91.         </div>
  92.         <div id="middle" style="position:absolute;left:36px;top:40px;bottom:25px;right:201px;overflow:scroll;">
  93.             <img alt="question" id="testImage" src="" />
  94.         </div>
  95.         <div id="right" style="position:absolute;top:40px;bottom:25px;right:0px;width:200px;border-left:1px solid gray;overflow:hidden;">
  96.             <div>right</div>
  97.         </div>
  98.         <div id="footer" style="position:absolute;bottom:0px;height:25px;width:100%;background-color:#356BA4;">
  99.             <div style="height:25px; line-height:25px; width:100%;color:White;vertical-align:middle;">
  100.                 &nbsp;<span id="lbl_UserName">用户：测试01[160001]</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span id="lbl_Number">
  101.                 评卷量：119</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span id="lbl_ExamNum">考号：********</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  102.                 <span id="lbl_Student">学生：********</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span id="lbl_SecretNum">
  103.                 密号：676966996560</span>
  104.             </div>
  105.         </div>
  106.     </div>
  107.     </form>
  108. </body>
  109. </html>

CSS实现高度和宽度自适应的更多相关文章

  1. 【转】纯 CSS 实现高度与宽度成比例的效果

    先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...

  2. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度，即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

  3. css回顾之左侧宽度自适应布局

    目标: <!DOCTYPE html> <meta charset=utf-8> <html> <head> <title>alibaba& ...

  4. css实现高度或者宽度不固定的div元素垂直左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 纯 CSS 实现高度与宽度成比例的效果

    http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/

  6. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

    一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...

  7. CSS学习笔记（6）--浮动，三列布局，高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  8. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  9. 不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形

    现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法. 在一个div内,包含8个div,控制这个8个div的height.margin以及border属性值,以达到 ...

随机推荐

  1. Pair Project: Elevator Scheduler [电梯调度算法的实现和测试] --11061188刘强

    结对编程总结 队员:刘强(11061188) 林谋武(11061169) 结对编程: 结对编程的优点: 1.  两个人合作,相比于一个人自己奋斗而言,更能激发自己的潜能:我们在合作过程中,互相学习,互 ...

  2. jdk 编译器 对final字段的处理

    class FinalTest{     void a(){         final int i=10;         int j=10;     } }            stack=2, ...

  3. SQL Server简单语句/待整理

    数据库对象:表Table,视图View,存储过程Stored Procedure,触发器Trigger 关系:1关系=1二维表,1关系有1关系名.1关系=1表对象 属性/字段: 二维表中垂直方向的列 ...

  4. Cannot forward after response has been committed

    项目:蒙文词语检索 日期:2016-05-01 提示:Cannot forward after response has been committed 出处:request.getRequestDis ...

  5. CentOS 7 网络配置工具

    之前在CentOS 6下编辑网卡,直接使用setup工具就可以了. 但在新版的CentOS 7里,setuptool已经没有网络编辑组件了,取而代之的是NetworkManager Text User ...

  6. tableView的高度问题

    新建tableView 到一个普通的视图控制器的View 下,如果大小是全屏高 ,你的数据最下面显示不全,需要在设置高度时候,用屏幕高度-65 即可

  7. EasyUI中Grid标题居中方法（jquery实现方法）

    $(".panel-title").css("text-align", "center"); 一句话搞定,就是这么随意

  8. 调试python程序

    pdb 关键步骤 python -m pdb ***.py n 单步

  9. c#中方法的重载

    转自:http://www.cnblogs.com/lovesong_blog/articles/1416617.html string和program都是Object的派生类,string类型是se ...

  10. 事件冒泡和事件捕获以及解释target和currenttarget的区别

    冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTY ...