CSS实现高度和宽度自适应
其实用绝对定位也可以实现高度和宽度的自适应，从而出现自适应大小的区域及滚动条。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewMarking.aspx.cs" Inherits="FirsteLite.OMS.Checking.NewMarking" %> <!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" style="height:100%;">
<head runat="server">
<title>网上在线阅卷</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
border-width:0px;
font-size:12px;
} ul
{
list-style-type:none;
} #toolbar li
{
padding:2px;
text-align:center;
cursor:pointer;
} #toolbar li:hover
{
background:url(images/_down.png) no-repeat center center;
} </style>
<script type="text/javascript">
window.onload = function () {
document.getElementById("testImage").src = "../modelimage/11111111111601041701000301.GIF";
}
</script>
</head>
<body style="height:100%;">
<form id="form1" runat="server" style="width:100%;height:100%;">
<div style="width:100%; height:100%; position:relative;">
<div id="header" style="position:absolute;left:0px;top:0px;height:40px;width:100%;background-color:#2964A0;color:White;vertical-align:middle;">
banner<img alt="logo" src="data:images/lg.png" style="float:right;" />
</div>
<div id="left" style="position:absolute;left:0px;top:40px;bottom:25px;width:35px;background-color:#F3F4F6;border-right:1px solid gray;
vertical-align:top;overflow:hidden;">
<ul id="toolbar">
<li><input type="button" title="评语" style="background-image:url('images/icon1.png');
border:1px solid transparent;background-color:transparent;width:29px;height:20px;cursor:hand;" /></li>
<li><input type="button" title="对号" style="background-image:url('images/icon4.png');
border:1px solid transparent;background-color:transparent;width:29px;height:23px;cursor:hand;" /></li>
<li><input type="button" title="半对" style="background-image:url('images/icon3.png');
border:1px solid transparent;background-color:transparent;width:28px;height:28px;cursor:hand;" /></li>
<li><input type="button" title="错号" style="background-image:url('images/icon2.png');
border:1px solid transparent;background-color:transparent;width:29px;height:23px;cursor:hand;" /></li>
<li><input type="button" title="快捷打分" style="background-image:url('images/icon5.png');
border:1px solid transparent;background-color:transparent;width:29px;height:25px;cursor:hand;" /></li>
<li style="border-top:1px solid gray; height:1px; line-height:1px; margin:5px 0px;padding:0px;"></li>
<li><input type="button" title="优秀试题" style="background-image:url('images/icon6.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li><input type="button" title="典型试题" style="background-image:url('images/icon7.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li><input type="button" title="异常答卷" style="background-image:url('images/icon8.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li><input type="button" title="答错位置" style="background-image:url('images/icon10.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li><input type="button" title="参考答卷" style="background-image:url('images/icon9.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li style="border-top:1px solid gray; height:1px; line-height:1px; margin:5px 0px;padding:0px;"></li>
<li><input type="button" title="默认大小" style="background-image:url('images/icon15.png');
border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
<li><input type="button" title="放大" style="background-image:url('images/icon13.png');
border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
<li><input type="button" title="缩小" style="background-image:url('images/icon14.png');
border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
<li><input type="button" title="前景色设置" style="background-image:url('images/icon22.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li><input type="button" title="背景色设置" style="background-image:url('images/icon21.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li style="display:none;"><input type="button" title="右旋转" style="background-image:url('images/icon23.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li style="display:none;"><input type="button" title="左旋转" style="background-image:url('images/icon24.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li><input type="button" title="等高" style="background-image:url('images/icon25.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li><input type="button" title="等宽" style="background-image:url('images/icon26.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
</ul>
</div>
<div id="middle" style="position:absolute;left:36px;top:40px;bottom:25px;right:201px;overflow:scroll;">
<img alt="question" id="testImage" src="" />
</div>
<div id="right" style="position:absolute;top:40px;bottom:25px;right:0px;width:200px;border-left:1px solid gray;overflow:hidden;">
<div>right</div>
</div>
<div id="footer" style="position:absolute;bottom:0px;height:25px;width:100%;background-color:#356BA4;">
<div style="height:25px; line-height:25px; width:100%;color:White;vertical-align:middle;">
<span id="lbl_UserName">用户：测试01[160001]</span> <span id="lbl_Number">
评卷量：119</span> <span id="lbl_ExamNum">考号：********</span>
<span id="lbl_Student">学生：********</span> <span id="lbl_SecretNum">
密号：676966996560</span>
</div>
</div>
</div>
</form>
</body>
</html>
CSS实现高度和宽度自适应的更多相关文章
- 【转】纯 CSS 实现高度与宽度成比例的效果
先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...
- 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度，即dataGridView根据数据自适应大小
上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...
- css回顾之左侧宽度自适应布局
目标: <!DOCTYPE html> <meta charset=utf-8> <html> <head> <title>alibaba& ...
- css实现高度或者宽度不固定的div元素垂直左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯 CSS 实现高度与宽度成比例的效果
http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/
- 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width
一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
- CSS学习笔记（6）--浮动，三列布局，高度宽度自适应
百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- 不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形
现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法. 在一个div内,包含8个div,控制这个8个div的height.margin以及border属性值,以达到 ...
随机推荐
- patchca验证码的使用
/** * 生成验证码 */ private static RandomFontFactory ff = null; // 自定义验证码图片背景 private static MyCustomBack ...
- PAT题库-1064. Complete Binary Search Tree (30)
1064. Complete Binary Search Tree (30) 时间限制 100 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...
- Java命名规则总结
1. JAVA源文件的命名 JAVA源文件名必须和源文件中所定义的类的类名相同. 2. Package的命名 Package名的第一部分应是小写ASCII字符,并且是顶级域名之一,通常是com.edu ...
- 深入浅出REST
不知你是否意识到,围绕着什么才是实现异构的应用到应用通信的“正确”方式,一场争论正进行的如火如荼:虽然当前主流的方式明显地集中在基于SOAP.WSDL和WS-*规范的Web Services领域,但也 ...
- UE4 WCF RestFul 服务器 读取JSON 数据并解析 简单实例
Note:不知道为什么通过Txt读取的JsonString,如果TXT 不是ANSI编码的话,会报JsonArrayStringToUStruct Unable to parse. bool UWg ...
- 常用类String的方法
String str="hello"; 1.与数组相关的方法 System.out.println(str.length()); System.out.println(str.ch ...
- Centos安装完MariaDB后启动不了 MySQL is not running, but lock file (/var/lock/subsys/mysql) exists
[root@admin-node subsys]# service mysql startStarting MySQL. ERROR! [root@admin-node subsys]# servic ...
- HDU5950（矩阵快速幂）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5950 题意:f(n) = f(n-1) + 2*f(n-2) + n^4,f(1) = a , f(2 ...
- 使用Spring 发送 Email !!!!
邮件服务器: 邮件服务器提供了邮件系统的基本结构,包括邮件传输,邮件分发,邮件存储等功能,以确保邮件能够发送到互联网中的任意地方. 邮件服务器就像我们生活中的邮局,为人们提供邮件服务.要保证邮件被正确 ...
- 启发式搜索A*算法
A* 寻路算法 (2011-02-15 10:53:11) 转载▼ 标签: 游戏 分类: 算法 概述 虽然掌握了 A* 算法的人认为它容易,但是对于初学者来说, A* 算法还是很复杂的. 搜索区域(T ...