当内容改变时如何保持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');

而且它运作良好。