當內容改變時如何保持div的高度固定？

Question

我有一個包含其他div的div。 像這樣的東西：

<div id='wrapper'>
   <div id='box1' class='boxes'></div>
   <div id='box2' class='boxes'></div>
   <div id='box3' class='boxes'></div>
</div>

點擊某些按鈕會發生這種情況：

changes function(num){
    $box="box"+num;
    $(".boxes").hide('fast');
    $("#"+$box).show('fast');

  };

要么

  changes function(num){
    $box="box"+(num);
    $(".boxes").hide('fast',function(){
          $("#"+$box).show('fast');
    });

  }

CSS：

   html,body{height:100%};
  .boxes{dispaly:hidden};
   #box1{display:block};

當show和height發生時，包裝器的高度會改變。 我希望在展示期間固定包裝器的高度並隱藏發生。 因為盒子的數量是可變的，所以我不能設置包裝器高度，例如：height = 400px; 所有箱子都有相同的高度。

Answer 1

由於事件管道，您無法移植並且在DOM渲染的預期設計中執行您要執行的操作。 我認為您希望在假設子對象大小相同的情況下，在更改其中的可查看內容時暫停父級的大小調整。

一個相對可移植的方法是使用祖父母和父div，將子div內嵌在父內部並將溢出設置為隱藏，以便您可以在JavaScript中將父div放置在祖父中。

外觀可能是您想要的，但您可以依賴於正確設置的父級的最小寬度和高度的大小，即使在各種放大率以及Web和移動設備顯示器上也是如此。

正確地執行此操作需要技巧和相當多的跨瀏 如果您使用經過良好測試的JQuery或AngularJS組件來為您提供順暢的功能，那將會更加精明。

另一種方法是將子對象放在同一位置並改變它們的z位置。 為div使用純色背景。 這可能比前兩段中的方法稍微簡單一些。 您希望子對象上沒有邊框，父級的背景顏色與子級相同。

即使是這種不太復雜的解決方案也可能不需要使您的頁面設計清晰直觀。 我建議重新考慮您的設計並符合您的演示要求，以便更加貼近常見瀏覽器的內置DOM渲染功能。

Answer 2

我已將我的樣式和腳本更改為：

.boxes{dispaly:hidden;min-width:100%};
 #box1{display:inline-block};

和

    $(".boxes").css('display','none');
    $("#"+$box).css('display','inline-block');

而且它運作良好。