절대/고정 하위가있는 부모 컨테이너의 자동 높이

Question

자동 높이를 설정하려고 할 때 고정되어 있고 절대적으로 고유하게 배치 된 두 개의 하위 요소가 포함 된 div가 있습니다.

상위 컨테이너에 자동 높이가 있어야하지만 하위 요소가 위치와 함께 페이지 구조 밖으로 나간다는 사실을 알고 있습니다.

부모님 div에서 작동하는 높이를 설정해 보았습니다.하지만 내 레이아웃이 반응 형이었을 때 모바일로 축소되었을 때 높이가 그대로 유지되어 내용이 겹쳐져 높이가 높아야합니다. 그 아이들과. 이 감각을 만드는 경우

확실하지, 때 그 아이

http://jsfiddle.net/dPCky/

Answer 1

부모 DIV가 height:auto을 사용할 수 없습니다 ... 나는 기압 나 내 실제 코드를 해달라고하지만, 필자는 설명하려고 바이올린을 만든 절대/고정으로 배치됩니다.

이렇게하려면 JavaScript를 사용해야합니다.

jQuery를에 예 :

var biggestHeight = 0; 
// Loop through elements children to find & set the biggest height 
$(".container *").each(function(){ 
// If this elements height is bigger than the biggestHeight 
if ($(this).height() > biggestHeight) { 
    // Set the biggestHeight to this Height 
    biggestHeight = $(this).height(); 
} 
}); 

// Set the container height 
$(".container").height(biggestHeight); 

작업을 예를 http://jsfiddle.net/blowsie/dPCky/1/

Answer 2

http://jsfiddle.net/dPCky/32/-float:left;

http://jsfiddle.net/dPCky/40/를 사용하여 유사한 효과 -은 더 가까이 원하는 효과를 초래한다.

html을 변경하려는 경우 위에서 수행 한 작업을 수행 할 수 있습니다.

내가 내가보기 엔 HTML/CSS에 위치 프로되고 싶은 사람에게 추천 할 것입니다 다음 튜토리얼에서 위치 배운 :

http://www.barelyfitz.com/screencast/html-training/css/positioning/

내가 일반적으로 가능한 일을 할 때 자바 스크립트를 사용하지 않는 것 html을 조정하려는 경우 css 또는 html 수준의 수정 사항이있을 수 있습니다.

Answer 3

쉬운 방법은 다음과 같습니다

$(".container").height($(document).height()); 

Answer 4

어떤 장치와 뷰포트 크기 조정 또는 회전에 적응 컨테이너이 자동 높이을 즐길 수 있습니다.

float, 인라인 블록, 절대, 여백 및 패딩으로 테스트되었습니다.이 하위 항목으로 설정되었습니다.

파티에 늦게

<div class="autoheight" style="background: blue"> 
    <div style="position: absolute; width: 33.3%; background: red"> 
    Only 
     <div style="background: green"> 
     First level elements are measured as expected 
     </div> 
    </div> 
    <div style="float:left; width: 33.3%; background: red"> 
    One Two Three Four Five Six Seven Eight Night Ten 
    </div> 
    <div style="float:left; width: 33.3%; background: red"> 
    One Two Three Four Five Six 
    </div> 
</div> 

<script> 
function processAutoheight() 
{ 
    var maxHeight = 0; 

    // This will check first level children ONLY as intended. 
    $(".autoheight > *").each(function(){ 

     height = $(this).outerHeight(true); // outerHeight will add padding and margin to height total 
     if (height > maxHeight) { 
      maxHeight = height; 
     } 
    }); 

    $(".autoheight").height(maxHeight); 
} 

// Recalculate under any condition that the viewport dimension has changed 
$(document).ready(function() { 

    $(window).resize(function() { processAutoheight(); }); 

    // BOTH were required to work on any device "document" and "window". 
    // I don't know if newer jQuery versions fixed this issue for any device. 
    $(document).resize(function() { processAutoheight(); }); 

    // First processing when document is ready 
    processAutoheight(); 
}); 
</script> 

Answer 5

조금씩, 그러나 이것은 내가 JS없이 최근에이 문제를 해결하는 방법이기 때문에이 사람을 도움이 될 수 있습니다 - 그들은 모바일 장치 축소로 아이들이 자신의 가로 세로 비율을 유지하는 경우. 내 예제는 컨텍스트에 대해 jQuery.cycle 슬라이드 쇼를 반응 적으로 만드는 것과 관련이 있습니다. 이것이 위의 목표를 달성하려는 것이라면 확실하지 않지만 휴대 기기에서는 페이지 너비가 100 %이고 큰 화면에서는 명시적인 크기를 갖는 컨테이너 내에 절대적으로 아이들을 배치해야합니다.

뷰포트 너비 단위 (vw)를 사용하도록 부모 높이를 설정할 수 있으므로 높이가 장치 너비에 상대적으로 적용됩니다. 요즘 대부분의 모바일 장치가이 장치를 올바르게 사용할 수 있도록 지원 범위가 넓으며 버그 및 부분 지원은 vw와 관련이 없습니다 (오히려 IE의 vmin 및 vmax). Opera Mini 만 어둠 속에 있습니다.

이 예에서 응답 점 사이에서 수행하는 작업을 알지 못하면 (jsfiddle에는 명시적인 높이가 설정되어 있습니다.) 어린이의 높이가 기기 너비에 비례하여 예상대로 줄어드는 것으로 가정합니다. 종횡비에 근거한 높이.

.container{ height: 75vw; }

http://caniuse.com/#feat=viewport-units

당신이 폭 측정과 같은 100vw에 대한 거라면 caniuse에 참고 알려진 문제 # 7를 수행하지만, 여기에 우리가 높이 연주! @ Blowsie의 대답에 관련

Answer 6

:

/** 
* Sets the height of a container to its maximum height of its children. This 
* method is required in case 
* 
* @param selector jQuery selector 
*/ 
function setHeightByChildrenHeight(selector) 
{ 
    $(selector).each(function() 
    { 
     var height = 0; 

     $(this).children("*").each(function() 
     { 
      height = Math.max(height, $(this).height()); 
     }); 

     $(this).height(height); 
    }); 
}; 

Answer 7

자바 스크립트를 사용하지 않을 경우,이 대답 https://stackoverflow.com/a/33788333/1272106을 참조 할 수있다.

간단한 설명 : 한 요소를 복제하고 숨기기를 설정하여 부모를 확장하십시오.