Question

我在设置div和body标签时动态扩展内部包含有问题。

以下是我使用的HTML和CSS，时间稍长。

  <!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>
<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
body
{
background:white;
}

.clearfix {
    min-height: 1px;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
#searchform
{
position:absolute;
height:110px;
clear:both;
}
#b2_sbox_middle
{
width:980px;
height:99px;
background:url('img.jpg') repeat-x;
border:1px solid #00CCCC;
}
#b2_inner_sf
{
margin-top:10px;
}
#sf_ch_container
{
clear:both;
margin-left:27px;
font-size:18px;
}

#sf_ch_formtitle
{
float:left;
width:202px;
font-size:18px;
text-align:left;
}
#sf_ch_stype
{
float:left;
}
.stype
{

    float:left;
    margin-left:27px;
    text-align: left;
}
</style>
<body>
<div align="center" class="clearfix">
<div id="searchform" align="center" style="top:105px; width:980px; margin-left:-490px; left:50%;" class="clearfix">
<div id="b2_sbox_middle">
<div id="b2_inner_sf" class="clearfix" style="border:0px solid;">
<div id="sf_ch_container" class="clearfix">
<div id="sf_ch_formtitle">SEARCH </div>
 <div id="sf_ch_stype"> SEARCH</div>
     </div>
     <div class="stype">
      <input name="text"  class="search-input" type="text" value="key"  size="20" maxlength="50" />
    </div>
    <div class="stype" >
      <input name="text2"  class="search-input" type="text" value="key"  size="20" maxlength="40" />
    </div>
    <div class="stype" >
      <input name="text2" class="search-input" type="text" value="key"  size="20" maxlength="40" />
    </div>
    <div class="stype" >
      <input name="text2" class="search-input" type="text" value="key"  size="20" maxlength="40" />
    </div>
    </div>
    </div>
    </div>
</div>
</body>
</html>

如果您在Firefox或Chrome中运行代码，请按F12并查看正文标记和正文后面的第一个div的高度，您将看到没有动态更改其高度以包含内部内容。

我不知道CSS中的问题在哪里。

还有第二个问题，如果你使用IE v.6进行预览，你会看到所有输入文件都是无序的，我不明白为什么？

任何帮助都将不胜感激!!

Answer 1

由于#searchform绝对定位，其父级的高度为0.您可以尝试：

body, body>div{min-height:100%;}

这是一个小提琴：http://jsfiddle.net/jEfMx/

动态扩展标签

1 个答案: