点击这里给我发消息 点击这里给我发消息

CSS三行三列DIV高度自适应的设置

添加时间:2011-7-18
    相关阅读: 设计 HTML CSS Windows 网站

用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100%就可实现高度自适应,不信,看代码:

<head>
<style>
body {
  font-family: arial, helvetica, sans-serif;
  color: black;
  margin: 5px;
background:#ffc url(d:/8767a.gif) repeat-y;
  padding: 0;
font:12px;
letter-spacing:1px;
 text-align:center;
font:120%;
}
ul
{
list-style-type:square;
list-style-image:url(d:/8767a.gif);
list-style-position:inside;
}
li
{
border:1px green solid;
border-width:0px 0px 1px 0px;
cursor:wait;
}
.inline
{
display:block;
}
.div
{
  paddin-top:-40px;
}
.maxfont
{
font-size:180%;
}
#header
{
background:gray;
margin:2px 0px;
width:790px;
}
#left
{
   background:#ffeef0;
float:left;
width:195px;
height:100%;
}
#middle
{
 background:#ffaae0;
float:left;
  width:390px;
  margin:0px 5px;
height:100%;
}
#right
{
  background:#ffaaaa;
 float:left;
 width:195px;
 width:-10px;
height:100%;
}
#footer
{
 background:#ffaa11;
 clear:both;
 width:790px;
 margin:1px 0px;
}
#left,#middle,#right
{
  text-align:left;
  text-indent:24px;
}
#content
{
margin:0px auto;
 width:790px;
height:400px;
}
</style>
</head>
<body>
<div style="display:none">
 今天下午
 <ul class="inline">
  <li >
  <p class="div">正常模式</p>
  <p class="maxfont">ssss</p>
  <p>aaa</p>
  <bfff>
</li>
  <li>梦之都 XHTML 教程.</li>
  <li>梦之都 CSS 教程.</li>
  <li>梦之都 JAVASCRIPT 教程.</li>
 </ul>
</div>
<div style="display:none">
伤亡事故
<ul>
  <li>v gma a a</li>
  <li>ddd dkdkdkd</li>
</ul>
</div>
<div id="header">
<h1>脚本控制三行三列自适应高度DIV布局</h1>
</div>
<div id="content">
  <div id="left">

  亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。

  亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供

  这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。

  </div>

  <div id="middle">

  如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows下的IE却不能。

</div>
</div>
</div>
<div id="footer"> 欢迎访问:www.devdao.com</div>
</body>

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册