Question

我有一个外部分区

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

包含div

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

内部div大于外部div的min-heigth，我看到外部div没有缩放到内部div的内容。限制内部div的底部内容。

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

由于

Answer 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>

Answer 2

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

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

#innerDiv {
  /*Stuff*/
}

虽然为我们提供了一个例子，但很难看到背景......

Answer 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自动扩展。

Answer 4

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

您可以手动设置外部div的高度
您使内部div具有10px
使用javascript增加外部div的高度。

div溢出问题

4 个答案: