動態改變div的高度，以父

我如何能實現，那藍框填充div的其餘地方和動態降低他的身高時，綠框變大？動態改變div的高度，以父

HTML

<div id="wrap"> 
    <div id="left"></div> 
    <div id="righttop"> 
     <div id="click">Click!</div> 
     <div id="box"></div> 
     <div id="place"></div> 
    </div> 
    <div id="rightbot"></div> 
</div>

CSS

#wrap { 
    padding: 5px; 
    width: 700px; 
    height: 500px; 
    background-color: yellow; 
    border: 1px solid black; 
} 
#left { 
    float: left; 
    margin: 0 5px 0 0; 
    width: 395px; 
    height: inherit; 
    background-color: red; 
} 
#righttop { 
    float: left; 
    padding: 5px; 
    width: 290px; 
    background-color: green; 
} 
#rightbot { 
    float: left; 
    margin: 5px 0 0 0; 
    width: 300px; 
    height: 60%; 
    background-color: blue; 
} 
#click { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
} 
#box { 
    display: none; 
    width: 200px; 
    height: 100px; 
    background-color: white; 
} 
#place { 
    width: 100px; 
    height: 120px; 
    background-color: lightgrey; 
}

$("#click").on("click", function (e) { 
    $("#box").slideToggle("fast"); 
});

非常感謝！

來源

2013-08-16 trek711

相關的，你可能會發現有用的：[讓div填充剩餘的屏幕空間]（http://stackoverflow.com/a/90886/425809） – Richard

您可以探索彈性框定義：http：// css -tricks.com/snippets/css/a-guide-to-flexbox/ - 更具體地說它的延伸部分 – cowcowmoomoo

您需要安裝javascript。通過將容器的高度減去綠色框來獲得藍色框的高度。然後onclick應根據綠色框的新大小更新藍色框的高度。 – Frisbetarian

不幸的是，有沒有辦法，你可以用CSS實現這一目標。然而，的slideToggle確實有一個回調，你可以用它來調整大小的東西，因爲它的進展

$("#box").slideToggle(
     { duration: "fast", 
     progress: function() { 
      $('#rightbot').height(
       $('#wrap').height() 
       - $('#righttop').height() 
       - 15 /* margins */) 
     } 
    });

而且在JSFiddle

唯一的醜陋的東西有邊距。不過，也可以通過編程的方式找到這些。

這是做到這一點的唯一方法是允許的藍色框

來源

2013-08-16 12:01:34 Richard

完美！非常感謝你！ – trek711

$("#click").on("click", function (e) { 
    $("#box").slideToggle("fast"); 
    $("#rightbot").height($("#left").height() - $("#rightbot").height()); 
});

我用#left div的高度爲100％的值的平穩調整大小。

另一種方法是使用overflow:hidden包裹格。

的解決方案取決於你的使用情況。

來源

2013-08-16 12:04:54

怎麼樣：

$("#click").on("click", function (e) { 
    var height = "63%", 
     $box = $("#box"), 
     $blueBox = $("#rightbot"); 

    if($box.is(":visible")){   
     $box.hide("fast"); 
     $blueBox.height(height); 
     return; 
    } 

    height = "43%"; 
    $box.show("fast"); 
    $blueBox.height(height); 
});

工作小提琴這裏：http://jsfiddle.net/ncrqb/15/

我希望它能幫助。

來源

2013-08-16 12:05:44 maverickosama92

擴展時會出現波紋 – Richard

$("#click").on("click", function (e) { 
    $("#box").slideToggle("fast"); 
    if($("#rightbot").height()==300) 
     $("#rightbot").height("43%"); 
    else 
     $("#rightbot").height("300"); 
});

這裏是fiddle

來源

2013-08-16 12:07:25

下面的代碼將解決這一問題： -

$("#click").on("click", function (e) { 
     $("#box").slideToggle("fast",function(){ 
      var bluedivHeight = 300;//$("#rightbot").height() if want to have dynamic  
      var toggleBoxHeight = $("#box").height(); 
      if($("#box").css("display")==="block"){ 
       $("#rightbot").height(bluedivHeight-toggleBoxHeight); 
      } else { 
       $("#rightbot").height(bluedivHeight); 
      } 
     }); 
    });

來源

2013-08-16 12:09:59

http://jsfiddle.net/ncrqb/21/

function centerBlue(){ 
     var blue = $("#rightbot"); 
     var parent = $("#left"); 
     var rightTop = $("#righttop"); 
     var left_space = (parent.outerHeight() - rightTop.outerHeight()) - 5; 
     blue.css("height",left_space+"px"); 
     console.log(rightTop.outerHeight()); 
    }

這裏是解決方案，和它的作品。

這些答案的所有是正確的，但他們只是忘記了，你需要重新大小的動畫之後的藍色框完成，否則jQuery將返回了滑動狀態的先前的高度。

而這是因爲，jQuery的動畫使用window.setTimeout（）;這就是爲什麼它不會阻止代碼，只有動畫完成。

來源

2013-08-16 12:10:24 Burimi

動態改變div的高度，以父

回答

相關問題