div溢出问题答案

【问题标题】：div overflow problemdiv溢出问题
【发布时间】：2011-05-19 19:06:05
【问题描述】：

我有一个外部 div

position: relative;
overflow: hidden;
min-heigth: 450px;

包含一个 div

position: absolute;
top: 10px;
right: 10px;

内部 div 大于外部 div 的最小高度，我看到外部 div 没有缩放到内部 div 的内容。关闭内部 div 的底部内容。

如何定义外部（或内部）div 以垂直缩放到（内部 div 的）内容

谢谢

【问题讨论】：

不要绝对定位内部div。你可以为你的 HTML/CSS 制作一个jsFiddle test case 吗？
可能与您的问题无关，但我想我会提到，如果这是从您的 CSS 中直接剪切粘贴，那么您有一个错字：min-heigth: 450px; 应该是 min-height: 450px;。这可能会导致其他问题。如果不是直接剪切粘贴，则忽略:)

标签： html css layout

【解决方案1】：

@trascher;这是可能的，但您添加了额外的标记，因为当您给子 div 一个 absolute position 时，它的父 div 不考虑它的高度。

检查这个http://jsfiddle.net/sandeep/6UksD/1/

CSS：

#outer
{
    position: relative;
    min-height: 450px;
    background:red;
    margin:10px 0 0 10px;
    width:200px;
    overflow: hidden;
}
#inner
{
    position:relative;
    background:black;
    height:600px;
    width:100px;
    margin:10px 0 0 10px;
    float:left;
}
#abinner
{
    position:absolute;
    background:yellow;
    height:100%;
    width:100%;
}

HTML：

<div id="outer">
    <div id="inner">
        <div id="abinner"></div>
    </div>

</div>

【讨论】：

【解决方案2】：

首先删除外部 div 上的 min-height，然后在外部 div 上放置 10px 的填充，而不是绝对定位内部 div。

#outerDiv {
  position:relative;
  overflow:hidden;
  padding:10px;
}

#innerDiv {
  /*Stuff*/
}

请给我们提供一个例子，很难看到上下文......

【讨论】：

【解决方案3】：

这里的东西

<div id="outer">
    <div id="inner"></div>
</div>

#outer
{
    width:300px;
     height:auto;

}
#inner
{
    width:200px;
    height:300px;

}

我认为这是你想要的：http://jsfiddle.net/anish/ZjQTt/

根据您的意愿设置内部内容高度。外部 div 自动扩展。

【讨论】：

【解决方案4】：

绝对定位不会增加其父元素的高度。

您可以手动设置外部 div 的高度
您使内部 div 的顶部/左侧边距为 10 像素
您使用 javascript 增加外部 div 的高度。

【讨论】：