html - 具有未知高度的中心元素而不占用空间

Question

从我所见，这是一个棘手的问题。基本上，我有需要显示在导航下方的页面上和下面的内容顶部的警报消息。这最好在http://jsfiddle.net/53b6g/1/的小提琴中显示- 注意注释样式 - 这种样式不能用于 b/c 我不知道页面上会有多少警报。所以wrapper元素的高度是未知的。

HTML：

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
        <div class="tr">
            <div class="td">
                but wait - there could be 3 or 2 or 1 so can't use height calculations
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS：

/*can't use style*/
.wrapper{
    position: relative;
    top: -4px;
    margin-bottom: -70px;
}
/*end can't use style*/


.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}

这是一个没有注释代码的小提琴，显示了手头的问题http://jsfiddle.net/8Awze/。这是可以单独使用 CSS 解决的问题吗？

HTML：

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS：

.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}

Answer 1

如果我对您的理解正确，您应该可以position: absolute按以下方式使用：

.wrapper{
    position: absolute;
    width: 100%;
    top: 25px;
}

http://jsfiddle.net/53b6g/2/