css - 将 div 的高度作为其内容，如果它更小，则作为其父级

Question

一些html：

<div style="height: 300px">
  <div id="inner">
    <div id="title">
       ...
    </div>
    <div id="content">
       ....
    </div>
    <div>
       ..another div
    </div>
  </div>
</div>

我希望我的内部 div 高度不大于父 div 的高度，如果它更大，那么内容 div 应该有滚动，但如果它更小，它应该与它的内容大小相同。

我试图设置内部的 max_height=100%，但我不能让我的内容有滚动。我想在没有js的情况下做到这一点

UPD：我不知道主 div 的高度（300px 不是恒定的）

UPD2：我的主 div 有“最大高度：100%”，所以我不知道确切的值

演示：http: //jsfiddle.net/kzfRk/7/

Answer 1

您需要将内部 div 最大高度设置为与根 div 高度相同。使用您的小提琴，将下面的 CSS 复制并粘贴到您的 CSS 文件中，它将起作用...

.container{
    max-height: 100%;
    border: 1px solid #000;
}
.inner{
    max-height: 100px;
    overflow-y: auto; border: 1px solid #f00;
}
.root{
    height: 100px;
    border: 1px solid;
}

Answer 2

不确定我是否理解，但如果您的滚动条没有出现，请尝试：

#inner{overflow-y:scroll;}

Answer 3

你设置你的高度，然后使用溢出来控制滚动。

​#inner{max-height:100%;overflow-y:scroll;}​

示例： http: //jsfiddle.net/calder12/drC3L/将外部 div 的大小更改为您想要的任何内容，如果内容过多，内部 div 将滚动。

Answer 4

你有一个活生生的例子吗？很难弄清楚你想要做什么。

您是否希望父 div 填充屏幕并滚动内容？如果是这样，给你的父 div 100% 的高度，并尝试将以下样式应用于你的内部 div：

height:100%; min-height: 100%; overflow:auto;

Answer 5

这是你的想法吗？（颜色只是为了便于观看）在这里观看直播。

css

.container{
    height: 300px;
    overflow: hidden;
    border: 1px solid #000;
}
#inner{
    max-height:300px;
    overflow-y: auto; border: 1px solid #f00;
}
#title{ background-color: #eed;}
#content{background-color: #fee;}

html

<div class='container'>
  <div id="inner"> 
    <div id="title"> 
       ... 
    </div> 
    <div id="content"> 
        ....    
    </div>    
    <div>    
       ..another div    
    </div>    
  </div>    
</div>