요소가 추가 될 때 자동 높이가있는 Div의 크기가 조정되지 않습니다.

CSS에서 높이를 auto로 지정하는이 div에서 포함 된 요소가 표시 블록과 함께 표시되는 경우에만 div 높이가 변경됩니다. 포함 된 요소에 대한 표시가 지정되지 않으면 div의 크기가 조정되지 않습니다. 요소는 자바 스크립트로 코드에 추가됩니다.요소가 추가 될 때 자동 높이가있는 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이 있습니다. 요소는이 코드 $("#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의 왼쪽 상단에있는 포함 된 요소 아래에 배치되기 때문에 이렇게 말합니다. 위의 코드에서 요소가 페이지에 추가되는 대신 위에 떠 다니는 것을 설명 할 수 있습니까?

출처

2011-09-21 user823527

이들은 모두 귀하의 문제입니다. 상대적인 위치를 지정하거나 절대적인 것을 모두 제거하십시오.

절대 위치는 절대적으로 배치 된 상위 요소보다 적은 요소에 의해 영향을받지 않는다는 것을 의미합니다. 그것으로, 역이 true인데 절대 위치가없는 요소는 절대 위치 요소에 영향을받지 않습니다. 당신은 높이가 내용에 따라 변경하려는 경우

이 position:relative;에 부모를 설정하고 부모 display:block;

출처

2011-09-21 16:21:26

'position : absolute;'또는'position : inherit;'은 페이지에서 원하는 곳에 요소를 배치 할 수있는 유일한 옵션입니다. 그걸로 div 요소의 크기를 조정할 수있는 컨테이너 div의 일부가 될 요소를 어떻게 얻을 수 있습니까? – user823527

부모 div가 절대 위치에 배치되도록 부모 div에 상대적으로 배치해야합니다. 그렇지 않으면 javascript로 확장을 시뮬레이션하십시오. –

을 시도, 당신은 첨부 된 요소에서 position:absolute를 제거해야합니다.

출처

2011-09-21 16:23:41

을 #page으로 설정하면 트릭을 잘 수행 할 수 있습니다. 모든 내용이 플로트 될 때 엔 클로징 div를 확장하는 작업을 확실히합니다.

다른 사람들이 말했듯이, position: relative도 설정하는 것이 좋습니다. 이렇게하면 절대 위치는 실제 페이지가 아닌 #page div에 상대적입니다.

출처

2011-09-21 16:35:00 Julian

요소가 추가 될 때 자동 높이가있는 Div의 크기가 조정되지 않습니다.

답변

관련 문제