Question

我有一种情况需要将div设置为与绝对定位的侧边栏相同的大小。我使用这个jQuery排序;

$('#main').height('auto');
top_height = $('.toolbar').outerHeight();
side_height = $('#RightSideBar').height();
body_height = $('#main').innerHeight();
console.log(body_height + '  ' + side_height);
if (body_height < side_height){
    $('#main').height(side_height + top_height);
}
else {
    $('#main').height(body_height);
}

由于某些网页上某些内容的动态特性，我遇到了一个新问题。由于#main的高度是绝对设置的，如果其内容的大小增加，div的大小不会随之增加，反之亦然。

我需要将div设置为与侧边栏相同的高度，并保持其内容的流畅性。所以div会增加和减少高度，直到侧边栏的高度。

我希望这很容易理解，如果不是这样说的话。

Answer 1

而不是根据您的计算设置height #main，请尝试设置min-height：

if (body_height < side_height){
    $('#main').css('min-height', side_height + top_height);
}
else {
    $('#main').css('min-height', body_height);
}

Answer 2

你可以不用javascript来做到这一点。您需要一个相对定位的父级，它将自动调整为侧栏，然后是一个绝对定位的div，它采用100％父级的高度。从来没有一个固定的高度，总是流畅的。

DEMO http://jsfiddle.net/nSBaA/1/

#wrapper {
    position: relative;
}
#main {
    position: absolute;
    height: 100%;
    width: 70%;
}
#sidebar {
    float: right;
    width: 20%;
}

设置div的高度但保持流畅

2 个答案: