html - 根据内容自动调整div的高度

Question

我有一个 HTML 页面包含

<div id="logo"></div>
<div id="content">
    <div id="transparncy"></div>
    <div id="contentdata">
        <div id="left">Contents  </div>
        <div id="right">Contents </div>
        </div>
    </div>
</div>
<div id="footer">Footer</footer>

和 CSS

#content {
margin-left:10%;
margin-top:20px;
width:80%;
position:relative;  
color:#37475e;
}

#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);  
-moz-opacity:0.4;   
background-color:#fff;  
width:100%;  
min-height:430px; 
height:auto;
position:absolute;  
top:0px;  
left:0px;  
z-index:-1;
border-radius:5px;
overflow:hidden;
}

#contentdata {
position:relative;  
width:100%;
margin:2%;
padding:1%;
}

#left {
width:60%;
float:left;
}

#right {
float:right;
width:35%;
}

#footer {
position:absolute;
clear:both;
width:100%;
}

我有两个问题，http://jsfiddle.net/wED4p/1/

• height: auto 透明 div (#transparency) 不工作
• #footer 总是放在 div#transperancy
上

Answer 1

Your fiddle .

我已经在 css 中编辑了一些代码，只需检查一次。

#footer {
position:relative;
clear:both;
width:100%;
overflow:auto;
}

update 1 fiddle