Question

我在我的div标题上每次点击都添加了50px，并且我希望当标题大于它时，我的div main具有相同的标题高度。

我不知道为什么它不起作用。

我有这个脚本

$(function () {
    var alturaHeader = $('header').height();
    var alturaMain = $('.main').height();

    $('button').click(function(){
        $('header').height(function(index, height){
            return (height + 50);
        });

        console.log(alturaHeader);

        if (alturaMain < alturaHeader) {
            alert("test");
            $('.main').css({'min-height': alturaHeader });
        }
    }); 
});

有什么建议吗？

JS小提琴：http://jsfiddle.net/JWf7u/ 感谢。

Answer 1

有你fiddle code每次更改时都应该更新div的高度。

    var alturaHeader = $('header').height();
    var alturaMain = $('.main').height();

    $('button').click(function(){
        $('header').height(function(index, height){
            return (height + 50);
        });

        alturaHeader = $('header').height()
        if (alturaMain < alturaHeader) {
            $('.main').css({'min-height': alturaHeader });
        }
    });

Answer 2

为什么不使用主要（子）div的css属性 height：100％ ..

检查以下

$(function () {
    var alturaHeader = $('.header').height();
    var alturaMain = $('.main').height();

    $('button').click(function(){
        $('.header').height(function(index, height){
            return (height + 50);
        });
       // below is not required we are using css to handle this
       /*
        console.log(alturaHeader);

        if (alturaMain < alturaHeader) {
            alert("test");
            $('.main').css({'min-height': alturaHeader });
        }
        */
    }); 
});

- CSS -

.header
{
    border:1px solid black;
}
.main
{
    border:1px solid red;
    height:100%;
}

高度：100％它会做你想要的检查下面的小提琴 http://jsfiddle.net/7fkp9/

记住，因为我们现在有边框所以它们没有相同的高度..它将非常2像素..对于完全相同的高度不要使用border属性或将border-size设置为零（0）像素

将高度添加到另一个Div

2 个答案: