CSS实现高度和宽度自适应
2016-10-09 13:27
597 查看
其实用绝对定位也可以实现高度和宽度的自适应，从而出现自适应大小的区域及滚动条。
<%@ 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="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实现div高度根据自适应宽度（百分比）调整
- CSS实现自适应高度布局：头部底部固定，中间自适应铺满屏幕剩余高度，中间盒子里左盒子固定右盒子自适应宽度
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
- css 没有宽度和高度声明实现的全屏自适应效果
- iframe自适应高度和宽度 全css实现无javascript
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- iframe自适应高度和宽度 全css实现无javascript
- 圆角自适应宽度按钮的css实现
- WEB - CSS实现的最小宽度自适应居中
- CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法
- DIV+CSS实现两边固定宽度,中间自适应宽度
- CSS：浅谈自适应宽度圆角按钮实现
- CSS：浅谈自适应宽度圆角按钮实现
- (div+css)上下固定中间自适应高度网页布局的实现（FF,IE)
- css+div+图片实现高度自适应圆角框
- css自适应宽度 多种方法实现宽度自适应的水平居中
- 【css】三栏，左右两栏固定，中间宽度自适应 ||| 三栏，高度自适应 有图片，高清，无码
- CSS实现自适应宽度
- 使用弹性盒布局来实现元素宽度与高度的自适应
- 用CSS实现ul标签中图片与文字底边对齐及自适应高度