Блог

Главная - Вопросы по программированию - динамически разворачивать теги

динамически разворачивать теги

#css

#css

Вопрос:

У меня возникли проблемы с настройкой тегов 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 и посмотрите высоту тега body и первого div после body, вы увидите, что ни один из них динамически не изменил свою высоту, чтобы включить внутреннее содержимое.

Я не знаю, где проблемы в CSS.

И вторая проблема, если вы сделаете предварительный просмотр с использованием IE v.6, вы увидите, что все входные файлы являются беспорядочными, и я не понимаю, почему??

Любая помощь будет высоко оценена!!

Комментарии:

1. пожалуйста, настройте jsfiddle.net например…

Ответ №1:

Поскольку #searchform абсолютно позиционирован, его родительские элементы будут иметь высоту 0. Вы можете попробовать:

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

Вот скрипка:http://jsfiddle.net/jEfMx /