Question

我正在进行动态搜索，其中我的动态结果从主容器中溢出，我尝试了不同的高度选项，但我无法弄清楚为什么我在display_reults部分中的结果会溢出内容div。我正在使用基于Ajax的搜索来获得结果。这是我的css：

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}

.content  {
  position: absolute;
  top: 28px;
  left: 0;
  background: #eee;
  right: 81px;
  bottom: 0;
  min-height: 200px;
  padding: 20px;
  border: 1px solid #ccc; 

  height:auto;
block:inline;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
#search_query
{margin-left:10px;
margin-right: 10px;
width: 325px;
}
 #acadsearch {   float: left; min-height: 28px; width: 330px; position: relative; top: 1px; left: 5px; }
               #acadsearchform { display: inline; position: relative; }
                  .acadsearchbox { font-family: "proxima-nova",Arial,Helvetica,sans-serif; font-weight: normal;  }
                  .acadsearchbox { border: 0px; background-color: #ffffff; position: relative; top: -1px; left: 0px; width: 303px; height: 20px; color: #00467f; padding-left: 3px;  }
                  .acadsearchbox_submit { border: 0px; background-color: #ffffff; position: absolute; top: -3px; left: 287px; width: 19px; height: 22px; }
 #progbyschool { font-family: "proxima-nova",Arial,Helvetica,sans-serif; font-weight: normal;   }                 
#progbyschool {  border: 0px; background-color: #ffffff; position: relative; top: -1px; left: 0px; width: 452px; height: 78px; color: #00467f; padding-left: 3px; }
 #progbycampus { font-family: "proxima-nova",Arial,Helvetica,sans-serif; font-weight: normal; }                 
#progbycampus {  border: 0px; background-color: #ffffff; position: relative; top: -1px; left: 0px; width: 418px; height: 22px; color: #00467f; padding-left: 3px; }
#acad_nav_1_a { margin: -1px 0px 0px 0px; color: #00467F; }
            #acad_nav_1_a a { color: #00467F; text-decoration: underline; }          
            #acad_nav_1_a a:hover { color: #47aa42; }
            #acad_nav_1_a ul li { list-style: none outside none; display: inline; margin-left: 5px; }
ul.a
 {
 display:block;}            

#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
<style type="text/css">
  #main {
   padding: 10px;
   margin: 100px;
   margin-left: 300px;
   color: Green;
   border: 1px dotted;
   width: 520px;
  }
  #display_results_1 {
  color: #00467F;
 position: relative;
  background: #FFFFFF;
  width: 330px;
  margin-left:10px;
    margin-top:10px;
    overflow:hidden;
    height:auto;
  }

    #display_results_2 .ul {
   position: relative;
   margin-left: 10px;
   margin-top: 10px;
  color: #00467F;
  display:table-cell;
  background: #FFFFFF;
  width: 330px;
  }

    #display_results_2 {
  color: #00467F;
   position: relative;
   margin-left: 1px;
   margin-top: 10px;
  background: #FFFFFF;
  width: 454px;

  }

  #display_results_3 {
  color: #00467F;
   position: relative;
   margin-left: 1px;
   margin-top: 10px;
  background: #FFFFFF;
  width: 419px;

  }

  #display_results_3_a li {
    display: inline;
    list-style: none outside none;
    margin-left: 5px;
}

#content_main .majors-list li {
    border-top: 2px solid #E5E5E5;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

这是我的HTML：

<br />
<div class="grid_10">
<div class="tabs">
<div class="tab">
       <input checked="checked" id="tab-1" name="tab-group-1" value="tab-1" type="radio" />
       <label for="tab-1">Programs</label>
<div class="content">


    <input id="search_query" name="search_query" placeholder="Search available undergraduate programs" size="50" type="text" />
<div id="display_results_1">
<div style="clear: left; height: 0; margin: 0; padding: 0;"></div>
</div>
</div>
</div>

</div>
</div>

Answer 1

好的，代码有点复杂但我认为问题出在.content左右。

我拿了你的代码并制作了一个小提琴：http://jsfiddle.net/audetwebdesign/397PZ/

并稍微整理了CSS。

.content {
    position: absolute;
    top: 28px;
    left: 0;
    background: #eee;
    right: 81px;
    min-height: 200px;
    padding: 20px;
    border: 1px solid #ccc;
    height:auto;
}

问题是您设置了约束容器块高度的偏移量bottom: 0;

这可能会照顾它。

文本溢出div

1 个答案: