父容器在设置为relative时不占用内容高度

Question

我有，

HTML，

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

CSS，

.outer {
    position: relative;
    overflow: scroll;    
    border : 1px solid red;
    height: auto;
}
.inner {
    position: absolute;
    width: 1200px;
    height: 895px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border : 1px solid yellow;
}

问题： - 外部不会占用内部内容的完整高度

预期： - 应该采用完整的高度

注意

我无法硬编码外高

我想在外面使用滚动条。

http://jsfiddle.net/sefkao23/

Answer 1

嗨，现在尝试这种方式

您只需定义 .outer class width或height

.outer {
    position: relative;
       height: 895px; 
    border : 1px solid red;
    width: 1200px;
}
.inner {
    position: absolute;
    
   
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border : 1px solid yellow;
}

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