Question

我有以下标记：

<div class="card" style="height:100%">
  <div class="controlPanelContainer">
    <div class="card" style="background-color:yellow;height:200px">    
    </div>
    <div class="card" 
    style="background-color:blue;height:200px;min-height:100px;margin-
      top:5px;overflow-y:auto;">
   With Bootstrap, you get extensive and beautiful documentation for common 
   HTML elements, dozens of custom HTML and CSS components, and awesome 
   jQuery plugins. With Bootstrap, you get extensive and beautiful 
   documentation for common HTML elements, dozens of custom HTML and CSS 
   components, and awesome jQuery plugins.With Bootstrap, you get extensive 
   and beautiful documentation for common HTML elements, dozens of custom 
   HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you 
   get extensive and beautiful documentation for common HTML elements, 
   dozens of custom HTML and CSS components, and awesome jQuery plugins.With 
   Bootstrap, ....
  </div>
 </div>
 <div class="card-footer" style="height:40px">Footer    
 </div>
</div>

和css：

.controlPanelContainer {
    display: flex;
    flex-flow: column;
}

Fiddle

我想要的是当我垂直调整大小时，蓝色div将调整大小直到达到最小高度。但那并没有发生。它根本没有调整大小。有什么帮助吗？

由于

Answer 1

这里的问题是你将静态高度设置为200px。因此，无论屏幕尺寸如何，它都将保持200px。

要垂直调整高度，您应该使用＆＃34; vh＆＃34;属性。

我假设您只想垂直调整高度并强制执行min-height属性。

以下是您修改后的代码：

<div class="card">
<div class="controlPanelContainer">
    <div class="card" style="background-color:yellow;height:200px">
    </div>
    <div class="card" style="background-color:blue;height:30vh;min-height:100px;margin-top:5px;overflow-y:auto;">
        With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens
        of custom HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you
        get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom
        HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you get extensive
        and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.
    </div>
</div>
<div class="card-footer" style="height:40px">Footer
</div>

.controlPanelContainer {
display: flex;
flex-flow: column;
height: 100vh

}

Div没有调整大小

1 个答案: