如何在內容更改時保持div的高度不變？

我有一個包含其他div的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};

當表演和高度發生高度包裝將會改變。我希望在展示和隱藏過程中將包裝的高度固定。，因爲框的數量是可變的我不能設置包裝高度例如：高= 400px;所有箱子都有相同的高度。

2016-12-31 Hamid hp

你試過'.wrapper {高度：400像素;}'？應該做的伎倆。另一個選擇是'max-height：400px;'當內容不需要'400px'時，這會讓它縮小。唯一的另外一件事就是決定內容會發生什麼：'overflow：hidden'或默認，這是'overflow：visible';' –

所有的盒子都有相同的高度。我想在隱藏盒子時包裝物高度不會改變。因爲您可以看到box1在頁面加載時可見。 –

如果所有的盒子都有相同的高度，並且box1會一直加載，那麼嘗試用box1的高度來指定包裝盒的高度。 '$（'＃wrapper'）.css（「height」，$（'＃box1'）。height（））;'' – nzkks

因爲事件管道，你不能可移植性和DOM渲染的設計意圖內做你正在嘗試做的。我認爲你想暫停調整父母的大小，同時在假設子對象大小相同的情況下更改其中的可見內容。

一個相對便攜的方法是做一個祖父母和父母的div，將子div放在父母的內部並將你的溢出設置爲隱藏，這樣你就可以在祖父母的父母div中定位JavaScript。

外觀可能是你想要的，但是你指望最小寬度，並且正確地設置了家長的高度尺寸，即使在不同的放大倍率和跨網絡和移動設備顯示。

這樣做正確需要技巧和相當的跨瀏覽器測試。如果您使用經過良好測試的JQuery或AngularJS組件來爲您提供流暢的功能，將會更加安全。

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

即使這樣不太複雜的解決方案可能是不必要的，使你的頁面設計清晰直觀。我建議重新考慮您的設計，並遵守您的演示文稿要求，以便與常用瀏覽器的內置DOM呈現功能更緊密地配合。

2017-01-01 00:33:26 FauChristian

我已經改變了我的風格和腳本：

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

和

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

，它的工作非常好。

2017-01-01 01:06:25

回答