过渡后允许窗口动态调整大小

Question

这是问题：

我们可以根据内容调整大小的窗口，但是当窗口大小时，高度不会动态变化，要么在下面留下大量的空白，要么将内容隐藏在页面的其余部分后面。

这是代码：

html：

<div class="panel-container" style="height: 706px;">
   <div class="control-panel create-job flexible">
     <div class="column-container">

JSX：

  resizePanel: function (height) {
   this.refs.panel.style.height = height + 'px';
  },
  getPanelContainerStyle: function (controlPanel) {
    if (this.state.isPanelOpen && _.isObject(controlPanel)) {
      var height = controlPanel.type.prototype.height;
      if (_.isNumber(height)) {
       return {height: height};
      } else return {height: 100};
    } else return {};
  },

CSS：

 .panel-container
   height 0
   transition height 0.3s
   margin-top bump-lg px
   margin-bottom bump-lg px

任何帮助都非常感谢！

Answer 1

您是否尝试过使用视口单元？您可以在此处找到更多信息https://teamtreehouse.com/community/Resizing-div-automational-depending-on-on-screen-size