Question

在此div上，使用CSS将高度指定为auto，div高度仅在包含的元素与显示块一起显示时才会更改。如果未为包含的元素指定display，则不调整div的大小。使用javascript将代码添加到代码中。

这是div和附加元素的CSS。

    #page {
       height: auto;
       min-height: 83%;
       padding-bottom: 20px;
    }

    .linkcard, .linkcard_init { 
       position: absolute;
       padding: 0;
       margin-top: 20px;
       margin-left: 20px;
       border: 1px solid DarkKhaki;
       border-radius: 3px 3px 0px 0px;
       box-shadow: inset 0px 0px 10px DarkKhaki;
       z-index: 26;
    }

这是HTML。使用此代码$("#page").append(response);将元素添加到div容器中。这会附加PHP脚本的echo语句。

  <div id="page"> <!-- Begin page div -->
    <div id="buttons">  
      <a href="#" onclick="create_linkcard();"> Add LinkCard</a> <br/>
    </div> <!-- End buttons -->

    <script type="text/javascript">

    $(document).ready(function() {
               // Make ajax call to recreate linkcards from XML data
               $.ajax({
                   url: "get_nodes.php",
                   type: "POST",
                   data: { },
                   cache: false,
                   success: function (response) {

                     if (response != '') 
                     {
                       $("#page").append(response);   /*** ADDING DIV ELEMENTS ***/              
                     }
                   }
               });
    });

    </script>

  </div> <!-- End page div -->

PHP脚本使用这样的代码回显附加到div的响应。

echo "<div id = '".$node['ID']."' class= 'linkcard ui-widget-content' style = 'top: ".$node->TOP."px; left: ".$node->LEFT."px; width: ".$node->WIDTH."px; height: ".$node->HEIGHT."px;'> \n";

echo "   <p class = 'linkcard_header editableText'>".$node->NAME."</p>\n";

echo "</div> \n";

元素似乎浮动在div（#page）之上。它们似乎没有附加到div。我这样说是因为，当我向#page添加更多元素时，它们被放置在#page左上角的包含元素下面。上面的代码中可以解释为什么元素浮动在顶部而不是添加到页面？

Answer 1

如果您希望根据内容更改高度，则需要从附加元素中删除position:absolute。

Answer 2

他们是position: absolute;，这是你的问题，让他们相对位置或全部删除绝对。

绝对位置意味着它不受任何元素影响，而不受父元素绝对定位元素的影响。因此，反之亦然，没有绝对位置的元素不受绝对定位元素的影响。

尝试将父级设置为position:relative;，并使父级display:block;

Answer 3

在overflow: hidden上设置#page可能会有所帮助。当它的所有内容都浮动时，它肯定会扩展封闭的div。

正如其他人所说，在页面上设置position: relative也没有什么坏处。这将确保绝对位置相对于#page div，而不是实际页面。

附加元素时，自动高度的Div不会调整大小

3 个答案: