當添加元素時，帶自動調整高度的div不會調整大小

在這個用CSS指定高度爲自動的div上，如果所包含的元素與顯示塊一起顯示，div高度纔會改變。如果沒有爲包含的元素指定顯示，則div不會調整大小。元素用javascript代碼添加。當添加元素時，帶自動調整高度的div不會調整大小

這裏是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。元素被添加到div容器中，代碼爲$("#page").append(response);。這會附加來自PHP腳本的回顯語句。

<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）之上。他們似乎沒有附加到分區。我這樣說是因爲，當我爲#page添加更多元素時，它們被放置在#page左上角的包含元素下。上述代碼中的內容可以解釋爲什麼元素浮動在頂部而不是添加到頁面中？

來源

2011-09-21 user823527

他們是position: absolute;，這是你的問題，讓他們相對位置或刪除絕對所有在一起。

絕對位置意味着它不受任何元素少於父絕對定位元素的影響。因此，反過來，沒有絕對位置的元素不受絕對定位元素的影響。

嘗試父設置爲position:relative;，並且使父display:block;

來源

2011-09-21 16:21:26

'position：absolute;'或'position：inherit;'是唯一的選項，允許我將這些元素放在頁面所需的位置。那我該如何讓元素成爲容器div'＃page'的一部分來調整這個div的大小？ – user823527

他們需要相對於父div的位置，父div被定位絕對。否則，用javascript模擬擴展。 –

如果你想要的高度來改變基礎上的內容，則需要從所附的元素中刪除position:absolute。

來源

2011-09-21 16:23:41

設置overflow: hidden在#page可能會做的伎倆。當它的所有內容都浮動時，它肯定可以擴展封閉的div。

正如其他人所說，在網頁上設置position: relative也不會有什麼壞處。這將確保絕對位置相對於#page div，而不是實際頁面。

來源

2011-09-21 16:35:00 Julian

當添加元素時，帶自動調整高度的div不會調整大小

回答

相關問題