您现在的位置：培训之家 →培训频道 → 电脑知识学习 → 网页制作 → HTML与CSS教程→CSS三行三列DIV高度自适应的设置

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

09-24 http://www.pxzj8.com HTML与CSS教程人气:630次

CSS三行三列DIV高度自适应的设置为http://www.pxzj8.com整理发布，类型为HTML与CSS教程，本站还有更多关于html与css教程,css教程,html网页设计教程,css视频教程,css教程下载，电脑知识学习 - 网页制作 - HTML与CSS教程的文章。正文： IT产品库 http://www.pxzj8.com

用脚本控制三行三列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>

    <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 改