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，如果它更大，那么content div应该有滚动，但如果它更小，它应该与它的内容大小相同。

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

UPD：我不知道主要div的高度（300px不是常数）

UPD2：我的主要div有“max-height：100％”，所以我不知道确切的值

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

Answer 1

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

#inner{overflow-y:scroll;}

Answer 2

您可以设置高度，然后使用溢出来控制滚动。

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

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

Answer 3

这是你的想法吗？（颜色只是为了便于查看）查看实时here。

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>

Answer 4

你有一个实例吗？很难弄清楚你想要做什么。

您是否希望父div填充屏幕和内容以滚动它？如果是这样，请将父div的高度设置为100％并尝试将以下样式应用于内部div：

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

Answer 5

您需要将内部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;
}

将div的高度作为其内容或作为其父级（如果它更小）

5 个答案:

CSS

HTML