根據Parent高度和Top position value值調整子元素高度

Question

我有固定高度（400px）的父級和高於父級 div 高度（400px - 子級 div 的最高值）的子級 div 高度應該基於以下條件。

• 父 div 高度 - 子 div 的頂部 position 值（例如：在這種情況下為 40px）

因此，最終子 div 高度應為 360px（400px - 子 div 的最高值為 -40px）

HTML：

<div class="parent">
    <div class="child">
        Parent Height: <span id="parentHeight"></span><br>
        Distance from top: <span id="distanceFromTop"></span><br>
        Child Height: <span id="childHeight"></span><br>
    </div>
</div>

腳本：

var __parentHeight = $('.parent').height();
var __distanceFromTop = $('.parent').offset().top - $('.child').offset().top;
var __finalHeight = parseInt(__parentHeight) - parseInt(__distanceFromTop);

$('#parentHeight').html(__parentHeight + 'px');
$('#distanceFromTop').html(__distanceFromTop + 'px');
$('#childHeight').html(__finalHeight + 'px');

$('.child').css('height', __finalHeight + 'px');

jsFiddle

預期的：

我得到的是：

Answer 1

像這樣更新你的最終高度計算 => var __finalHeight = parseInt(__parentHeight) - parseInt(__distanceFromTop);

Answer 2

您正在設置 position 不是邊距或填充。 要獲得頂部 position 像素，請使用$('.child').position().top; 這將為您提供 40px position 頂部。

這是小提琴jsfiddle