如何通过儿童内容增加div高度？

我试图在标题周围标出白色背景，并且指出其余的内容。我已经尝试过溢出，清除，最小高度最大高度，*，我能想到的所有东西。如何通过儿童内容增加div高度？

<html> 
<head> 
    <title>Ventura County CEC</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="global.css"> 

    <style type="text/css"> 
     html 
     { 
      height: 100%; 
     } 
     body 
     { 
      min-height: 100%; 
     } 
     #courseContainer 
     { 
      width: 960px; 
      background-color: #ffffff; 
      position: relative; 
      margin: 0 auto; 
      height: *; 
      /*min-height: 1610px;*/ 
      padding-left: 15px; 
      padding-right: 15px; 
     } 

     #courses 
     { 
      position: absolute; 
      top: 221px; 
      height: *; 
      width: 960px; 
      border: 1px #cccccc dotted; 
      border-radius: 4px; 
      /*height: -moz-calc(* + 3px); 
      height: -webkit-calc(* + 3px); 
      height: -o-calc(* + 3px); 
      height: calc(* + 3px);*/ 
      padding-bottom: 3px; 
      background: #ffffff; 
     } 

     /*#superCourses 
     { 
      background: #ffffff; 
      width: 960px; 
      height: *; 
     }*/ 

     .course 
     { 
      position: relative; 
      height: 120px; 
      width: 952px; 
      margin-top: 3px; 
      margin-left: 3px; 
      border: 1px #cccccc dotted; 
      border-radius: 4px; 
     } 

     .course_title 
     { 
      position: absolute; 
      left: 5px; 
      width: 150px; 
      height: 120px; 
      line-height: 100px; 
      text-align: center; 
     } 

     .titleAlign 
     { 
      display: inline-block; 
      vertical-align: middle; 
      line-height: normal; 
     } 

     .course_description 
     { 

      position: absolute; 
      left: 150px; 
      top: 10px; 
      bottom: 10px; 
      width: 340px; 
      height: 100px; 
      overflow: auto; 
      z-index: 5; 


     } 

     .course_pics 
     { 

      position: absolute; 
      left: 450px; 
      height: 110px; 
      width: 100px; 
      margin-top: 5px; 

     } 

     .picture 
     { 

      position: absolute; 
      height: 110px; 
      width: 250px; 

     } 

     .course_ment_loc 
     { 
      position: absolute; 
      right: 5px; 
      top: 10px; 
      width: 200px; 
      text-align: center; 
      vertical-align: middle; 
      height: 110px; 
     } 

     .teacher 
     { 
      top: 0px; 
     } 

     .school 
     { 
      position: absolute; 
      bottom: 0px; 
     } 

    </style> 
</head> 

<body> 
    <div id="courseContainer"> 

     <?php include 'title.php';?> 
     <div id="superCourses"> 
      <div id="courses"> 

       <div id="list"> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
        <?php include 'CECCourses/courseTemplate.php';?> 
       </div> 

      </div> 
     </div> 
    </div> 
</body>

来源

2014-02-26 Sodra

身高：*;是无效的CSS。 –

你为什么使用绝对定位？如果你不知道，你可能不应该 –

你#courses DIV绝对定位，这就是为什么你的背景并不包围元素。

如果您从此元素中删除position: absolute;，它将解决您的问题，并且背景将延伸到整个高度。请注意，#courses的位置样式被分为两次：一次在您的global.css中，一次在courses.php中。

编辑：

如果#courses在定位上的其他网页和使用global.css中需要保持原样，只是改变courses.php样式来更改#courses是相对定位：

#courses 
{ 
    position: relative; 
    top: 221px; 
    height: *; 
    width: 960px; 
    border: 1px #cccccc dotted; 
    border-radius: 4px; 
    /*height: -moz-calc(* + 3px); 
    height: -webkit-calc(* + 3px); 
    height: -o-calc(* + 3px); 
    height: calc(* + 3px);*/ 
    padding-bottom: 3px; 
    background: #ffffff; 
}

来源

2014-02-26 21:39:09 chicgeek

谢谢。问题是两个课程ID都在本地和全球CSS。更改了div的名称，并删除了position属性。谢谢。 – Sodra

@Sodra太棒了，我很高兴你对此进行了排序。作为一个加拿大人，我同意，法国吐司用糖浆很好吃。 – chicgeek

如何通过儿童内容增加div高度？

回答

相关问题