根據內容自動調整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 ）的height: auto不起作用
• #footer總是放在div#transperancy之上

Answer 1

你的小提琴 。

我已經在CSS中編輯了一些代碼，只需檢查一下即可。

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

更新1個小提琴

Answer 2

這是您修改過的小提琴，

小提琴

#contentdata {
    width:90%;
    margin:10px;
    padding:1%;
    position: relative;
}

#transparncy {
    opacity: 0.4;
    filter:alpha(opacity=40);  
    -moz-opacity:0.4;
    background-color:blue;  
    width: 100%;
    height: 100%;
    position: absolute;
}