html - 如何在可变高度的流体布局中定位元素死点？

标签 html css layout fluid-layout

需要将 box-inside div 死点定位到 wrapper div，其中 wrapper div 的高度取决于侧边栏 div 的高度。 box-inside div 相对于 wrapper div 是绝对定位的，并设置了一个可变的宽度和高度，它对应于其中的图像和内容。

这可以通过给 box-inside div 提供宽度和高度来实现，但必须与可变宽度和高度有关。(盒子内的 div 必须与带有填充的 img 具有相同的尺寸)

jsFiddle代码 here

这是 HTML 代码:

    <body>
        <div class="wrapper">
            <div class="sidebar"></div>
            <div class="inside-box">
                <img src="badge.gif" />
            </div>
        </div>
    </body>

CSS

    * {
    margin: 0;
    }

html,body {
    height: 100%;
    }

body {
    background: white;
    display: block;
    font-family: Tahoma, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    }

.wrapper {
    position:relative;
    height: auto;
    width:70%;
    margin: 0 auto ;
    background:green;

    }
.sidebar {
    height: 500px;
    width:30%;
    background: red;
    clear:both;
    }
.inside-box {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background:yellow;
    min-width:275px; min-height:183px;
    padding:10px;
    }

目前 enter image description here