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

【问题标题】：Make div's height as its content or as its parent if it is smaller将 div 的高度作为其内容，如果它更小，则作为其父级
【发布时间】：2025-12-15 11:10:02
【问题描述】：

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

我尝试设置 inner 的 max_height=100%，但我无法让我的内容滚动。我想不用js就可以了

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

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

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

【问题讨论】：

使用 clear:both ；在子 div 中
清除？但我没有任何浮动 div
溢出的建议不起作用？
我必须设置高度，设置内容高度后会启用溢出
那你是怎么设置高度的呢？语言变量？你不能在 div 内部设置相同的值吗？

标签： css layout html

【解决方案1】：

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

#inner{overflow-y:scroll;}

【讨论】：

【解决方案2】：

这是你的想法吗？（颜色只是为了便于观看）观看直播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>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我不希望我的 div 内容更大
它必须更大。如果您将 .root 的高度设置为 100 像素，而您的内容没有填充 100 像素，那么您最终会出现间隙。
间隙没问题！ Bcz 我的列很少，我不希望它们的大小相同
那么唯一的方法就是让整个内部 div 滚动。如果不给它一个高度，你不能让内容 div 滚动，这将在页脚之前而不是在它之后创建间隙。用 .inner {overflow-y: auto; 替换你的 .inner css边框：1px 实心#f00；高度：95px;}

【解决方案4】：

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

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

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

【讨论】：

我做不到，bcz主div的高度不是恒定值
已更新以涵盖动态外部 div 高度。

【解决方案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;
}

【讨论】：