Chiều cao tự động trên vùng chứa mẹ với Trẻ em Tuyệt đối/Cố định

Question

Tôi đang cố đặt chiều cao tự động là div chứa 2 phần tử con, được định vị cố định và hoàn toàn respecitvely.

Tôi muốn vùng chứa chính của tôi có chiều cao tự động nhưng tôi biết điều này thật khó vì các phần tử con được lấy ra khỏi cấu trúc trang với vị trí của chúng.

Tôi đã thử đặt chiều cao cho div gốc của tôi hoạt động, nhưng với bố cục của tôi đang phản hồi, khi được chia tỷ lệ xuống thiết bị di động, chiều cao vẫn giữ nguyên khi nội dung trong đó được xếp chồng lên nhau và do đó chiều cao cần tăng với con cái của nó.

Không chắc nếu điều này có ý nghĩa, tôi không có mã thực tế trên ngực tôi atm nhưng ive đã fiddle cố gắng để giải thích ...

http://jsfiddle.net/dPCky/

Answer 1

Các div cha mẹ không thể sử dụng height:auto khi con của nó được định vị tuyệt đối/cố định.

Bạn cần sử dụng JavaScript để đạt được điều này.

Một ví dụ trong 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); 

dụ làm việc http://jsfiddle.net/blowsie/dPCky/1/

Answer 2

http://jsfiddle.net/dPCky/32/ - Một tác dụng tương tự như sử dụng float:left;

http://jsfiddle.net/dPCky/40/ - Một thậm chí gần hơn dẫn đến hiệu ứng mong muốn của bạn.

Nếu bạn sẵn sàng thay đổi html của mình, thì bạn có thể làm những gì tôi đã làm ở trên.

Tôi đã học được định vị từ các hướng dẫn sau đây mà tôi rất muốn giới thiệu cho bất cứ ai muốn trở thành một pro vị trong html/css:

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

Tôi thường sẽ tránh sử dụng javascript nếu có thể khi làm điều gì đó có khả năng có thể sửa chữa cấp độ css hoặc html, nếu bạn sẵn sàng điều chỉnh html của mình.

Answer 3

Một cách dễ dàng hơn là:

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

Answer 4

Thưởng thức này chiều cao auto container mà thích nghi với bất kỳ thiết bị và thay đổi kích thước khung nhìn hoặc quay.

Nó đã được thử nghiệm với float, inline-block, tuyệt đối, lề và đệm đặt cho trẻ em.

<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

Một chút muộn để đảng, nhưng điều này có thể giúp đỡ người khác như thế này là cách tôi giải quyết vấn đề này thời gian gần đây mà không JS - NẾU những đứa trẻ duy trì tỷ lệ khía cạnh của họ khi họ co lại cho các thiết bị di động. Ví dụ của tôi liên quan đến việc tạo một slideshow jQuery.cycle đáp ứng, cho ngữ cảnh. Không chắc chắn nếu đây là những gì bạn đang cố gắng đạt được ở trên, nhưng nó liên quan đến trẻ em hoàn toàn vị trí trong một container có chiều rộng 100% trang trên kích thước di động và rõ ràng trên màn hình lớn hơn.

Bạn có thể đặt chiều cao của cha mẹ để sử dụng đơn vị chiều rộng khung nhìn (vw), do đó chiều cao thích nghi với chiều rộng của thiết bị. Hỗ trợ là đủ rộng những ngày này mà hầu hết các thiết bị di động sẽ sử dụng các đơn vị này một cách chính xác, lỗi và hỗ trợ một phần không liên quan đến vw (nhưng thay vào đó, để vmin và vmax trong IE). Chỉ Opera Mini ở trong bóng tối.

Không biết trẻ đang làm gì giữa các điểm đáp ứng trong ví dụ này (jsfiddle có chiều cao rõ ràng), giả sử chiều cao của trẻ em giảm xuống tương ứng với chiều rộng thiết bị, cho phép bạn giả định chính xác chiều cao dựa trên tỷ lệ khung hình.

.container{ height: 75vw; }

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

Do lưu ý biết vấn đề # 7 trên caniuse nếu bạn đang đi cho 100vw như một biện pháp chiều rộng, nhưng ở đây chúng tôi đang chơi với chiều cao!

Answer 6

liên quan đến @ câu trả lời Blowsie của:

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

Nếu bạn không muốn sử dụng JavaScript, bạn có thể tham khảo câu trả lời này https://stackoverflow.com/a/33788333/1272106.

Mô tả ngắn: sao chép một phần tử và đặt chế độ hiển thị thành ẩn để mở rộng cấp độ gốc.