html - 文本在div中溢出

我正在进行动态搜索，我的动态结果从主容器中溢出，我尝试了不同的高度选项，但是我无法弄清为什么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>

最佳答案

好的，代码有点复杂，但是我认为问题出在.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来限制容器块的高度。

这可能会解决。

关于html - 文本在div中溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17026969/