动态扩展标签

我遇到了设置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的高度，你会看到，没有一个动态改变了他们的高度，包括内部内容。

我不知道问题出在哪里。

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

任何帮助将不胜感激！

来源

2011-11-05 sorin

请建立一个jsfiddle.net，例如。 .. – meo

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

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

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

来源

2011-11-05 23:16:23

动态扩展标签

回答

相关问题