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" >
<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 >
<form runat="server" >
<div >
<div >
banner<img alt="logo" src="images/lg.png" />
</div>
<div 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 >
<li><input type="button" title="评语" images/icon1.png');
border:1px solid transparent;background-color:transparent;width:29px;height:20px;cursor:hand;" /></li>
<li><input type="button" title="对号" images/icon4.png');
border:1px solid transparent;background-color:transparent;width:29px;height:23px;cursor:hand;" /></li>
<li><input type="button" title="半对" images/icon3.png');
border:1px solid transparent;background-color:transparent;width:28px;height:28px;cursor:hand;" /></li>
<li><input type="button" title="错号" images/icon2.png');
border:1px solid transparent;background-color:transparent;width:29px;height:23px;cursor:hand;" /></li>
<li><input type="button" title="快捷打分" images/icon5.png');
border:1px solid transparent;background-color:transparent;width:29px;height:25px;cursor:hand;" /></li>
<li ></li>
<li><input type="button" title="优秀试题" images/icon6.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li><input type="button" title="典型试题" images/icon7.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li><input type="button" title="异常答卷" images/icon8.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li><input type="button" title="答错位置" images/icon10.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li><input type="button" title="参考答卷" images/icon9.png');
border:1px solid transparent;background-color:transparent;width:29px;height:24px;cursor:hand;" /></li>
<li ></li>
<li><input type="button" title="默认大小" images/icon15.png');
border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
<li><input type="button" title="放大" images/icon13.png');
border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
<li><input type="button" title="缩小" images/icon14.png');
border:1px solid transparent;background-color:transparent;width:28px;height:21px;cursor:hand;" /></li>
<li><input type="button" title="前景色设置" images/icon22.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li><input type="button" title="背景色设置" images/icon21.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li ><input type="button" title="右旋转" images/icon23.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li ><input type="button" title="左旋转" images/icon24.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li><input type="button" title="等高" images/icon25.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
<li><input type="button" title="等宽" images/icon26.png');
border:1px solid transparent;background-color:transparent;width:28px;height:25px;cursor:hand;" /></li>
</ul>
</div>
<div >
<img alt="question" src="" />
</div>
<div >
<div>right</div>
</div>
<div >
<div >
<span >用户：测试01[160001]</span> <span >
评卷量：119</span> <span >考号：********</span>
<span >学生：********</span> <span >
密号：676966996560</span>
</div>
</div>
</div>
</form>
</body>
</html>- 上一篇 »父容器内子容器浮动的高度自适应问题 _ CSS_HTML
- 下一篇 »css3让元素自适应高度