Question

我正试图让白色背景在标题周围徘徊，同时也会向其他内容推文。我尝试了溢出，清晰，最小高度最大高度，*，我能想到的一切。

<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>

Answer 1

您的#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; }

如何使用子内容增加div高度？

1 个答案: