Question

我的应用程序很多

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
</div>

例如此处：http://jsfiddle.net/pceof476/

无需添加calc(100% - headerSize)，我就无法实现自己想要的目标。由于我的标头可以更改大小，因此当我调整其大小时，硬设置的计算会破坏它。

我也希望我的2标头始终可见。

类似http://jsfiddle.net/acs641g5/，但带有内容的滚动条。

Answer 1

我分叉了您的示例，并试图解决此问题。如果您有两个行的内容，然后使用eclipse，则标题高度将保持不变。并在“标题”中显示标题或默认情况下为两行提供高度。如果您不能保持恒定的高度，那么您的设计就会看起来很破损。

同一件事，您可以申请另一个例子。让我知道您是否有任何疑问。

*{
  
  box-sizing:border-box;
}
.container {  
  background: blue; 
  padding: 10px; 
  width: 200px; 
}

.fill{
  height: 40px; 
  width: 100%; 
}

.f1{
    background: grey; 
}
.f2{
  background: brown;
}

.content { 
  max-height: 150px; 
  max-width: 100%; 
  overflow-y:auto;
}

.header{
    background: yellow; 
    width:100%;
    padding:10px
}

<div class="container">
  <div class="header">Test</div>
 <div class="content">
    <div class="fill f1"></div>
    <div class="fill f2"></div>
    <div class="fill f1"></div>
    <div class="fill f2"></div>
    <div class="fill f1"></div>
    <div class="fill f2"></div>
 </div>
</div>

计算没有计算头的大小？

1 个答案: