自动高度外部div

Question

我正在尝试将div＃container的高度设置为auto，其基于定位的相对位置，内部div位于容器的绝对位置和中间位置。

<div id="header">Header</div>
<div id="container">
    <div class="items" id="item1">Item 1</div>
    <div class="items" id="item1">Item 2</div>
    <div class="items" id="item1">Item 3</div>
    <div class="items" id="item1">Item 4</div>
    <div class="items" id="item1">Item 5</div>
    <div class="items" id="item1">Item 6</div>
</div>

请查看下面的演示并帮助我实现如下图所示的设计

演示：http://jsfiddle.net/Coolenough/eq5ygb23/

Answer 1

添加一个额外的相对内部容器，它可以相对于父级#container定位并保持定位的绝对.items。

＆＃13;

＆＃13;

#header {
    background-color: #000000;
    color: #ffffff;
    padding: 5px;
    margin-bottom: 2px;
}

#container {
    border: 2px solid red;
}

.inner-container{
    position:relative;
    width: 80px;
    height: 40px;
    margin:50px auto;
}

.items {
    border: 1px solid black;
    background-color: #38c;
    width: 80px;
    height: 40px;
    color: #ffffff;
    position:absolute;
    top:0;
    left:0;
}

＆＃13;

<div id="header">Header</div>
<div id="container">
    <div class="inner-container">
        <div class="items" id="item1">Item 1</div>
        <div class="items" id="item1">Item 2</div>
        <div class="items" id="item1">Item 3</div>
        <div class="items" id="item1">Item 4</div>
        <div class="items" id="item1">Item 5</div>
        <div class="items" id="item1">Item 6</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;